Details/Summary

About

A native browser element to hide/show content

Alternatives

Accessibility

Requirements

Issues

Examples

    <details class="c-details">
    <summary class="c-details__summary"><span></span></summary>
    <div class="c-details__body"></div>
</details>

    <details class="c-details" open>
    <summary class="c-details__summary"><span></span></summary>
    <div class="c-details__body"></div>
</details>

    <details class="c-details c-details--custom">
    <summary class="c-details__summary"><span></span></summary>
    <div class="c-details__body">
        
        
    </div>
</details>

JS - Parameters

References / inspiration

Scott OHara - styling the Details/Summary element