Finally Monday! Today we are kick starting a new series of tutorials on rarely used HTML tags
The <details>
element is a powerful HTML5 feature that allows developers to create interactive disclosure widgets. This tag is used to show or hide additional content, making it useful for creating things like FAQs, dropdowns, or other sections where the user can choose to reveal hidden information.
The <details>
element semantically represents a disclosure widget, which is a section of content that the user can either reveal or hide. It works in tandem with the <summary>
element, which acts as a summary or label for the hidden content.
As it comes
<details>
<summary>Click to reveal more information</summary>
Here is some hidden content that is revealed when the user clicks the summary.
</details>
With Tailwind CSS
<details class="p-4 border border-neutral-300 rounded-md">
<summary class="font-semibold cursor-pointer">Click to reveal more information</summary>
<div class="mt-2 text-neutral-700">
Content with basic Tailwind styling.
</div>
</details>
When styling the <details>
element with Tailwind, consider targeting the <summary>
to customize its appearance when it is in the open state. Tailwind’s group classes can be handy here.
<details class="group p-4 border border-neutral-300 rounded-md">
<summary class="font-semibold cursor-pointer group-open:text-blue-500">
Click to reveal more information
</summary>
<div class="mt-2 text-neutral-700 group-open:bg-neutral-100">
Content with advanced Tailwind styling that changes when the details are open.
</div>
</details>
<details>
element is natively keyboard accessible. Users can toggle the content with the space or enter key when the <summary>
is focused.<details aria-expanded="false">
<summary role="button" aria-controls="details-content">Click to reveal more information</summary>
<div id="details-content">
Accessible content with ARIA attributes.
</div>
</details>
The <details>
element is supported by all modern browsers, including Chrome, Firefox, Edge, and Safari. Older versions of Internet Explorer do not support it.
For browsers that do not support the <details>
element, a JavaScript polyfill can be used to simulate the behavior.
<details>
<summary>Click to reveal more information</summary>
<div class="fallback-styling">
Fallback content for unsupported browsers.
</div>
</details>
if (!('open' in document.createElement('details'))) {
document.querySelectorAll('details').forEach(detail => {
detail.querySelector('summary').addEventListener('click', function() {
detail.open = !detail.open;
detail.querySelector('.fallback-styling').style.display = detail.open ? 'block' : 'none';
});
});
}
<details class="p-4 border border-neutral-300 rounded-md" id="example-details">
<summary class="font-semibold cursor-pointer">Product Specifications</summary>
<ul class="mt-2 list-disc pl-5 text-neutral-700">
<li>Processor: Quad-core 2.5GHz</li>
<li>RAM: 16GB</li>
<li>Storage: 512GB SSD</li>
</ul>
</details>
The <details>
element is a versatile and accessible way to create interactive content on the web. By using it effectively, you can enhance user experience by providing optional information that is easily accessible without cluttering the page.
Hope you enjoyed this tutorial and have a good day!
/Michael Andreuzza
Get lifetime access to every theme available today for $199 $139 and own
them forever. Plus, new themes, lifetime updates, use on unlimited
projects and enjoy lifetime support.
— No subscription required!