Programming Native Accordion HTML Details Lists Without JavaScript

Learn to develop native exclusive accordion details lists without JavaScript, and styling them to be nicer looking using CSS. Question 1: What is a "Native Accordion? It's a standard HTML details element that, when combined with the name attribute, gains mutually exclusive behavior. Question 2: Does this need JavaScript? Nope! The browser handles all the open/close logic and the grouping, making it extremely performant and accessible by default. Question 3: Why use it? It greatly simplifies FAQ pages, menus, or any list of content where you only want one section visible at a time.

<style>
body { font-family: Arial; font-size: 20px; margin: 30px; }
h1 { color: #2f79aa; }
details[name="detailsgroup1"] {
    width: 500px;
    margin: 20px 0px;
}
details[name="detailsgroup1"][open] > summary {
    border-radius: 7px 7px 0px 0px;
}
details[name="detailsgroup1"] > summary {
    background: #EEE;
    border: 1px solid #c8c8c8;
    padding: 15px;
    border-radius: 7px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
details[name="detailsgroup1"] > summary:hover {
    background: #DDD;
}
details[name="detailsgroup1"] > div {
    background: #f7f5f5;
    border: 1px solid #d1cdcd;
    padding: 15px;
    border-radius: 0px 0px 7px 7px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
</style>
<h1>Native Accordions Details Without JavaScript</h1>
<details name="detailsgroup1">
    <summary>Question 1: What is a "Native Accordion?"</summary>
    <div>
        It's a standard HTML <code>&lt;details&gt;</code> element that, when combined with the <code>name</code> attribute, gains mutually exclusive behavior.
    </div>
</details>
<details name="detailsgroup1">
    <summary>Question 2: Does this need JavaScript?</summary>
    <div>
        Nope! The browser handles all the open/close logic and the grouping, making it extremely performant and accessible by default.
    </div>
</details>
<details name="detailsgroup1">
    <summary>Question 3: Why use it?</summary>
    <div>
        It greatly simplifies FAQ pages, menus, or any list of content where you only want one section visible at a time.
    </div>
</details>