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:

  
  
  
  
  
  
  
  


 

  
Section 1
  

    

    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.
    
  
  
Section 2
  

    

    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.
    
  
  
Section 3
  

    

    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.
    
    

      
List item one
      
List item two
      
List item three
    
  
  
Section 4
  

    

    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.
    
    

    Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
    Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
    inceptos himenaeos.
    
  

 
 

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:

 // Start Of A New Accordion Element
 TITLE OF ACCORDION ELEMENT 
// Anything Here Will Be Displayed After Accordion Is Toggled To Open

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.

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:

 // Start Of A New Open Accordion Element 
 TITLE OF ACCORDION ELEMENT 
// Anything Here Will Be Displayed After Accordion Is Toggled To Open

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.