HTML DOM Details Object: Accessing and Manipulating <details> Elements

The HTML DOM Details object represents the <details> element in HTML. The <details> element is used to create a disclosure widget that the user can open or close to view or hide content. With the DOM Details object, you can access and control this functionality through JavaScript, enabling you to create interactive and dynamic web pages.

Understanding the <details> Element

The <details> element is typically used to hide additional information or content that is not immediately necessary for the user. The <summary> element, a direct child of <details>, provides a label or heading for the content. When a user clicks the <summary> element, the content within <details> is shown or hidden.

The Details Object

The Details object in the HTML DOM provides a way to programmatically interact with the <details> element. Through this object, you can:

• Check the current open/closed state of the details element.
• Programmatically open or close the details content.
• Attach event listeners to respond to the open/close state changes.

Syntax

The syntax to access a <details> element using JavaScript is:

const detailsElement = document.getElementById("yourDetailsElementId");

Once you have a reference to the details element, you can access its properties:

Properties of the Details Object

Property	Type	Description
`open`	Boolean	Reflects whether the details content is currently expanded (true) or collapsed (false). Setting this property will programmatically expand or collapse the details.

Examples

Let’s delve into some practical examples to understand how to use the Details object effectively.

Example 1: Basic Toggle Functionality

This example demonstrates how to toggle the visibility of the details content using a button:

<details id="myDetails1">
  <summary>Click to Expand/Collapse</summary>
  <p>This is some content that can be hidden or shown.</p>
</details>
<button id="toggleBtn1">Toggle Details</button>

<script>


  const details1 = document.getElementById("myDetails1");
  const toggleBtn1 = document.getElementById("toggleBtn1");

  toggleBtn1.addEventListener("click", () => {
    details1.open = !details1.open;
  });


</script>

Output:

Click to Expand/Collapse

This is some content that can be hidden or shown.

Toggle Details

Example 2: Tracking Open/Close State

Here’s an example that updates a message based on whether the details element is open or closed:

<details id="myDetails2">
  <summary>More Information</summary>
  <p>This is the additional information.</p>
</details>
<p id="status2">Details are currently closed.</p>

<script>


  const details2 = document.getElementById("myDetails2");
  const status2 = document.getElementById("status2");

  details2.addEventListener("toggle", () => {
    if (details2.open) {
      status2.textContent = "Details are now open.";
    } else {
      status2.textContent = "Details are now closed.";
    }
  });


</script>

Output:

More Information

This is the additional information.

Details are currently closed.

Example 3: Initially Opened Details

You can set the open attribute directly in HTML to make the details element initially open:

<details id="myDetails3" open>
  <summary>Initially Open</summary>
  <p>This content is visible by default.</p>
</details>
<p id="status3">This details element is open by default.</p>

Output:

Initially Open

This content is visible by default.

This details element is open by default.

Example 4: Programmatically Open/Close on Page Load

You can use JavaScript to programmatically control the open state on page load:

<details id="myDetails4">
  <summary>Controlled Open</summary>
  <p>This details element's open state will be controlled by JavaScript on page load.</p>
</details>

<script>


  const details4 = document.getElementById("myDetails4");

    details4.open = true;


</script>

Output:

Controlled Open

This details element’s open state will be controlled by JavaScript on page load.

Example 5: Styling Based on Open/Closed State

You can dynamically style a <details> element based on whether it’s open or closed.

<details id="myDetails5">
  <summary>Styled Details</summary>
  <p>The appearance of this element changes on open/close state.</p>
</details>

<script>


  const details5 = document.getElementById("myDetails5");
  details5.addEventListener('toggle', () => {
  details5.style.backgroundColor = details5.open ? 'lightgreen' : 'white';
  details5.style.padding = details5.open ? '15px' : '10px';
  });


</script>

Output:

Styled Details

The appearance of this element changes on open/close state.

Real-World Use Cases

The <details> element and the associated DOM Details object are highly useful for creating:

• FAQ Sections: Collapsing frequently asked questions to save screen space.
• Product Descriptions: Hiding detailed specifications or additional product information.
• Navigation Menus: Showing submenus upon interaction for enhanced user experience.
• Settings Pages: Organizing options under collapsible groups.
• Interactive Documentation: Revealing specific pieces of information on demand.

Browser Support

The <details> element and the associated DOM Details object are supported by all modern browsers, ensuring consistent behavior across platforms. ✅

Conclusion

The HTML DOM Details object provides the functionality required to manipulate the <details> element programmatically. By using its open property and the toggle event listener, you can create dynamic and user-friendly interactions for your web applications. Mastering these features allows for more efficient presentation of information and a better overall user experience.