Creating An Accordion List Without Javascript

Published February 7, 2013 | Categories: Web Development
Many sites implement accordions for everything from menus and navigation to product features to calendar event details. The fact is that accordion lists are among the most popular implementations of javascript and can be seen in some implementation on almost every web application and most advanced web sites. With the recent explosion of mobile devices accessing the web there has been a lot more value placed on responsive design. One facet of that has been developing sites without relying on javascript which has been the most common way of generating rich media experiences for users. Some things simply can’t be done without javascript, but other things can be accomplished with a bit of innovation. Accordion lists are just one of many things commonly done in javascript that can be done even in browsers either with scripts disabled or not supported at all.
A typical html snippet for a list might look like this:
<ul id="accordion">
<li>
<h3>Section 1</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<h3>Section 2</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<h3>Section 3</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<h3>Section 4</h3>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
</ul>
<ul id="accordion">
<li>
<<strong style="color: red;">label for="section-1-checkbox"</strong>>Section 1</<strong style="color: red;">label</strong>>
<strong style="color: red;"><input id="section-1-checkbox" type="radio" name="accordion-level-1" /></strong>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<<strong style="color: red;">label for="section-2-checkbox"</strong>>Section 2</<strong style="color: red;">label</strong>>
<strong style="color: red;"><input id="section-2-checkbox" type="radio" name="accordion-level-1" /></strong>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<<strong style="color: red;">label for="section-3-checkbox"</strong>>Section 3</<strong style="color: red;">label</strong>>
<strong style="color: red;"><input id="section-3-checkbox" type="radio" name="accordion-level-1" /></strong>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
<li>
<<strong style="color: red;">label for="section-4-checkbox"</strong>>Section 4</<strong style="color: red;">label</strong>>
<strong style="color: red;"><input id="section-4-checkbox" type="radio" name="accordion-level-1" /></strong>
<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
</li>
</ul>
<strong style="color: red;">
<style type="text/css">
#accordion input[name=accordion-level-1]:not(:checked) + div { display: none; }
#accordion input[name=accordion-level-1]:checked + div { display: block; }
#accordion input[name=accordion-level-1] { width: 0px; height: 0px; margin: 0px; opacity: 0.0; }
#accordion label { cursor: pointer; }
</style> </strong>
Obviously one of the drawbacks of this method is the lack of animation since animation was only possible with javascript prior to html5. The good news is that once this html/style accordion has been implemented you can also add scripts to you page to implement the accordion using script for those users that do have script enabled and render the styles we added for the scriptless version inert by simply removing the radio inputs from the DOM. Now your accordion can expand and contract both with and without script, though admittedly it will probably look better when scripts are enabled.
Recent Posts



