Friday, December 1, 2023
HomeVideo EditingHTML Factor: particulars | Envato Tuts+

HTML Factor: particulars | Envato Tuts+

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.


The fundamental syntax for the <particulars> ingredient is as follows:

  <abstract>Click on to toggle</abstract>
  <!-- Content material to be revealed or hidden -->

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.


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!)


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.


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.

particulars abstract {
  cursor: pointer;

Study Extra



Please enter your comment!
Please enter your name here

Most Popular

Recent Comments