The HTML <particulars> ingredient represents a “disclosure widget” from which the consumer can get hold of further data or controls. It lets you create collapsible sections of content material on a webpage, offering an interactive technique to conceal or reveal content material as wanted.
Syntax
The fundamental syntax for the <particulars> ingredient is as follows:
1 |
<particulars>
|
2 |
<abstract>Click on to toggle</abstract> |
3 |
<!-- Content material to be revealed or hidden -->
|
4 |
</particulars>
|
The <particulars> ingredient ought to comprise a <abstract> ingredient as its first youngster. The content material to be revealed or hidden is positioned after the <abstract> ingredient and might be marked up like most traditional content material; a <p>, a <div>, an <img>, and so forth.
Instance
Right here’s a easy instance with barely any styling in any respect. It reveals how the <particulars> ingredient can be utilized, with two <abstract> parts, every revealing a <p> when clicked:
Right here’s a second instance, with barely extra HTML markup, with a view to make styling with CSS barely simpler. This demo is taken from Jemima Abu’s tutorial Learn how to Construct an HTML Accordion (No CSS or JavaScript!)
Attributes
The <particulars> ingredient helps the next attributes:
-
open: specifies that the small print needs to be seen when the web page masses. This attribute doesn’t require a worth, and might be included like so:<particulars open>
Content material
The <particulars> ingredient can comprise HTML content material like textual content, photographs, lists, tables, and extra. You’ll be able to embody legitimate HTML parts inside the <particulars> ingredient to offer the specified content material that will probably be revealed or hidden.
Did You Know?
- The
<particulars>ingredient is usually used to create collapsible sections, resembling incessantly requested questions (FAQs), further data sections, or spoiler content material. - When utilizing the
<particulars>ingredient, the abstract needs to be concise and clearly point out what will probably be revealed or hidden when clicked. - You’ll be able to type the looks of the disclosure widget utilizing CSS to customise its visible presentation.
Styling
By default, the <abstract> ingredient makes use of the textual content cursor. Think about altering this to a pointer cursor to point out the consumer that that is an interactive ingredient.
1 |
particulars abstract { |
2 |
cursor: pointer; |
3 |
}
|
