Home >Web Front-end >HTML Tutorial >How do I use the HTML5 <details> and <summary> elements to create collapsible content?
<details></details>
and <summary></summary>
Elements to Create Collapsible ContentThe HTML5 <details></details>
and <summary></summary>
elements provide a simple and semantic way to create collapsible content. The <details></details>
element acts as a container for the collapsible content, while the <summary></summary>
element provides a heading or label that, when clicked, toggles the visibility of the content within the <details></details>
element.
Here's how it works:
<summary></summary>
: This element is required within the <details></details>
element and acts as the control for showing or hiding the content. The text content of the <summary></summary>
element is displayed as the heading or label for the collapsible section.<details></details>
: This element encompasses the <summary></summary>
element and all the content you want to be collapsible. When the page loads, the content within the <details></details>
element is initially hidden by default. Clicking the <summary></summary>
element toggles the visibility of the content.Example:
<code class="html"><details> <summary>Click to Expand</summary> <p>This is the collapsible content. You can include any HTML content here, such as paragraphs, images, lists, etc.</p> </details></code>
In this example, clicking "Click to Expand" will reveal the paragraph of text. Clicking it again will collapse the content. The browser handles the toggling of the visibility automatically. No JavaScript is required for basic functionality.
<details></details>
and <summary></summary>
Elements with CSSYou can fully customize the appearance of the <details></details>
and <summary></summary>
elements using CSS. This allows you to match the collapsible content with your overall website design. You can style the <summary></summary>
element to change the appearance of the toggle, and you can style the <details></details>
element to control the appearance of the content when it's expanded and collapsed.
Example:
<code class="css">details { border: 1px solid #ccc; padding: 10px; margin-bottom: 10px; } summary { cursor: pointer; background-color: #f0f0f0; padding: 5px; margin-bottom: 5px; } details[open] summary { /* Style when open */ background-color: #ddd; } details[open] { /* Style the details when open */ border-color: #aaa; }</code>
This CSS adds a border and padding to the <details></details>
element, styles the <summary></summary>
element with a background color and padding, and adds a different style when the <details></details>
element is open (using the [open]
attribute selector). You can adjust these styles to fit your website's design. Remember to be mindful of accessibility when styling, ensuring sufficient contrast and clear visual indicators.
<details></details>
and <summary></summary>
While <details></details>
and <summary></summary>
offer a semantic and accessible way to create collapsible content, there are some accessibility considerations:
aria-label
to the <summary></summary>
element can provide additional context.<summary></summary>
, provide appropriate alternative text for screen readers.<details></details>
and <summary></summary>
Generally, <details></details>
and <summary></summary>
have good browser support. However, older browsers may not render them correctly. For older browsers, you might need a JavaScript polyfill or a fallback mechanism. Modern browsers (Chrome, Firefox, Safari, Edge) support these elements natively without requiring any additional work beyond the basic HTML and CSS. Always test your implementation across various browsers and assistive technologies to ensure consistent behavior and accessibility. Consider using a tool like caniuse.com to check the support for these elements across different browser versions.
The above is the detailed content of How do I use the HTML5 <details> and <summary> elements to create collapsible content?. For more information, please follow other related articles on the PHP Chinese website!