HTML Element: details | Envato Tuts+

The  HTML <particulars> aspect represents a “disclosure widget” from which the consumer can acquire extra info or controls. It means that you can create collapsible sections of content material on a webpage, offering an interactive strategy to cover or reveal content material as wanted.

Syntax

The essential syntax for the <particulars> aspect is as follows:

1

<particulars>

2

  <abstract>Click on to toggle</abstract>

3

  <!-- Content material to be revealed or hidden -->

4

</particulars>

The <particulars> aspect ought to comprise a <abstract> aspect as its first little one. The content material to be revealed or hidden is positioned after the <abstract> aspect and might be marked up like most conventional 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 exhibits how the <particulars> aspect can be utilized, with two <abstract> components, every revealing a <p> when clicked:

Right here’s a second instance, with barely extra HTML markup, with the intention to make styling with CSS barely simpler. This demo is taken from Jemima Abu’s tutorial How to Build an HTML Accordion (No CSS or JavaScript!)

Attributes

The <particulars> aspect helps the next attributes:

• open: specifies that the small print must be seen when the web page masses. This attribute doesn’t require a price, and might be included like so: <particulars open>

Content material

The <particulars> aspect can comprise HTML content material like textual content, pictures, lists, tables, and extra. You possibly can embrace legitimate HTML components inside the <particulars> aspect to supply the specified content material that will likely be revealed or hidden.

Did You Know?

• The <particulars> aspect is usually used to create collapsible sections, similar to steadily requested questions (FAQs), extra info sections, or spoiler content material.
• When utilizing the <particulars> aspect, the abstract must be concise and clearly point out what will likely be revealed or hidden when clicked.
• You possibly can type the looks of the disclosure widget utilizing CSS to customise its visible presentation.

Styling

By default, the <abstract> aspect makes use of the textual content cursor. Contemplate altering this to a pointer cursor to indicate the consumer that that is an interactive aspect.

You may additionally discover that making the abstract textual content unselectable makes for a greater consumer expertise. Discover within the above examples how clicking on the abstract typically leads to among the textual content being highlighted?

1

particulars abstract {

2

  cursor: pointer;

3

  user-select: none;

4

}

Abstract Pseudo-Parts

There are some nice pseudo-elements related to the particulars and abstract components (like ::marker) which may help you type issues much more. Try this pretty mailbox concept utilizing the open attribute, by Kilian Valkhof.

Study Extra