HTML 5 allows us to create collapsible boxes (panels) without the need of adding our custom JavaScript code – the <details> tag allows us to create panels with minimal setup and makes our pages load faster. However, it should still be used with fallback as support is not very decent as of the moment of writing this.

Browser support

The <details> tag is supported in Chrome 31 and greater, Opera 27 and greater and Safari 7 or greater. The Android’s built-in browser supports it as well. Notably, IE and Firefox does not have a released version with support for the tag at this moment.

The <details> tag

The details tag accept an optional child – <summary>. The contents inside the details tag (we can place nearly everything) will be hidden until we open the box. The title of the box would either be a localized version of Details or if we add our own summary tag – the title would be the summary that we have added.

Optionally, we could declare if we want the collapsible box to be expanded or opened when the page is accessed with the attribute open. Its value is false by default which makes the contents of the boxes hidden until the user clicks on their title.

HTML 5 Books

• Murach’s HTML5 and CSS3, 3rd Edition
• Web Design with HTML, CSS, JavaScript and jQuery Set
• HTML5 and CSS3 All-in-One For Dummies

Examples of the details tag

Here are some examples of the details tag in action.

First, we change some of its default styling:

.col-lg-4{
            float: left;
            max-width: 33.33%;
        }
        .text-center {
            text-align: center;
        }

        details {

            background-color: chartreuse;
            padding: 5px;
            border-radius: 6px;
            border: 3px groove forestgreen;
            margin: 5px;
        }

We make the details container fluid, center its content and add some effects to the collapsible box (details).

Thereafter, we create a collapsible box that would be hidden by default and would display to the users Our Products List and a caret indicating users can see the products by clicking.

<details>
    <summary>Our Products List</summary>
    <ol>
        <li>Carbon</li>
        <li>Oxygen</li>
        <li>Nitrogen</li>
        <li>Silver</li>
        <li>Iron</li>
    </ol>
</details>

Then, we create another box:

<div class="col-lg-4 text-center">
    <details>
        <ol>
            <li>Carbon</li>
            <li>Oxygen</li>
            <li>Nitrogen</li>
            <li>Silver</li>
            <li>Iron</li>
        </ol>
    </details>
</div>

This time, it will have the browser’s default localized summary or title.

<div class="col-lg-4 text-center">
    <details open>
        <ol>
            <li>Carbon</li>
            <li>Oxygen</li>
            <li>Nitrogen</li>
            <li>Silver</li>
            <li>Iron</li>
        </ol>
    </details>
</div>

Finally, we add another box which would also have the default summary or title but it will be opened whenever a user accesses the page.

References

Caniuse.com, “Details”, Available at: http://caniuse.com/#search=details. Accessed 2015/5/10