Home > Tutorials > HTML/CSS/JS Tutorials > Create Accordions Using The New <DETAILS> & <SUMMARY> Tags in HTML5.1

Create Accordions Using The New <DETAILS> & <SUMMARY> Tags in HTML5.1

HTML5.1 has brought about some amazing new features and functions, many of which used to be possible only via a JavaScript library like jQuery. Accordions have long been a popular way to categorize and simplify alot of content within a single page – and the most common way to create accordions in the past was using jQuery. HTML5.1 aims to change that with the new <details> and <summary> tags that have been introduced.

To illustrate both how the new tags work, and also the comparison between the jQuery method, I will use the same exact demo accordion that is used on the original jQueryUI website. Here is the full source code for the jQuery accordion:

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery UI Accordion - Default functionality</title>
  <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
  <link rel="stylesheet" href="/resources/demos/style.css">
  <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
  <script>
  $( function() {
    $( "#accordion" ).accordion();
  } );
  </script>
</head>
<body>
 
<div id="accordion">
  <h3>Section 1</h3>
  <div>
    <p>
    Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
    ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
    amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
    odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
    </p>
  </div>
  <h3>Section 2</h3>
  <div>
    <p>
    Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
    purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
    velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
    suscipit faucibus urna.
    </p>
  </div>
  <h3>Section 3</h3>
  <div>
    <p>
    Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
    Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
    ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
    lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
    </p>
    <ul>
      <li>List item one</li>
      <li>List item two</li>
      <li>List item three</li>
    </ul>
  </div>
  <h3>Section 4</h3>
  <div>
    <p>
    Cras dictum. Pellentesque habitant morbi tristique senectus et netus
    et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
    faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
    mauris vel est.
    </p>
    <p>
    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    </p>
  </div>
</div>
 
 
</body>
</html>

Now let’s take a look at that very same accordion made using the new HTML5.1 <details> and <summary> tags:

See the Pen New HTML5.1 Accordions by Michael Boguslavskiy (@Metalp3n) on CodePen.

Note we don’t need jQuery at all now – simplifying our page significantly since we’re not calling various Javascript libraries and their associated CSS stylesheets.

The most basic structure for the new <details> and <summary> tags goes as follows:

<details> // Start Of A New Accordion Element
<summary> TITLE OF ACCORDION ELEMENT </summary>
// Anything Here Will Be Displayed After Accordion Is Toggled To Open
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
</p>
</details>

You’re free to use any usual HTML formatting inside the <details> and <summary> tags as you usually would, and you can further style your <details> and <summary> elements using CSS.

The only downside, currently, is that there is no way to close the currently opened accordion elements if a new one is opened. Regardless this is the first time these elements are being introduced – and I am sure future versions of HTML will improve on the new elements further.

What you can do currently is specify if you want a specific element to start off in the open position. To do so simply specify open in the <details> tag, like so:

<details open> // Start Of A New Open Accordion Element 
<summary> TITLE OF ACCORDION ELEMENT </summary>
// Anything Here Will Be Displayed After Accordion Is Toggled To Open
<p>
Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.
</p>
</details>

About Michael Boguslavskiy

Michael Boguslavskiy is a full-stack developer & online presence consultant based out of New York City. He's been offering freelance marketing & development services for over a decade. He currently manages Rapid Purple - and online webmaster resources center; and Media Explode - a full service marketing agency.

Check Also

Understanding The Difference Between Class and ID

A good buddy of mine has recently started his own learning process diving into HTML, CSS, ...

Like every other website, this site uses cookies to deliver to analyze our traffic. Cookies may also be utilized by our advertisers and partners. By using this website you agree to the use of said cookies. More Information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings, continuing to navigate past this message, or you click "Accept" below then you are consenting to the use of cookies on the Rapid Purple website.

Close