How to Create a Simple jQuery Accordion

In today’s tutorial, I’m going to show you how to create a simple jQuery accordion. Accordions display collapsible content panels for presenting information in a limited amount of space.

To get started we’re going to create an unordered list, with the id of “accordion”, and inside that, we’re going to add a few list items grouped by 2 items in each group.. One with a class of “title” and one with “content”. Take a look at the code below:

[tutorial_details]

<ul id="accordion">
<li class="title">lable One</li>
<li class="content">
<h2>Duis eu enim turpis.</h2>
Duis eu enim turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi eget lectus porttitor, dapibus mi porttitor, sollicitudin velit. Nam in sollicitudin tellus. Aliquam erat volutpat. Nunc pharetra ullamcorper pharetra. Pellentesque luctus lacus non pharetra consequat. Vivamus eget nisi venenatis, euismod lectus ut, sagittis ligula. Integer ultrices porta neque ut eleifend. In aliquet aliquam mauris, eu gravida massa vestibulum sed. Phasellus at nunc eu eros viverra placerat. Donec at sapien id augue tincidunt dapibus. Fusce elementum bibendum mollis. Praesent ac massa tempus, feugiat est ac, dapibus nunc. Vestibulum pulvinar tempus nunc, mattis pharetra dolor suscipit sed. Curabitur risus nibh, tempor in vehicula mattis, vulputate id ipsum.
    </li>
<li class="title">lable Two</li>
<li class="content">
<h2>Interdum et malesuada fames ac ante ipsum primis in faucibus.</h2>
Duis eu enim turpis. Interdum et malesuada fames ac ante ipsum primis in faucibus. Morbi eget lectus porttitor, dapibus mi porttitor, sollicitudin velit. Nam in sollicitudin tellus. Aliquam erat volutpat. Nunc pharetra ullamcorper pharetra. Pellentesque luctus lacus non pharetra consequat. Vivamus eget nisi venenatis, euismod lectus ut, sagittis ligula. Integer ultrices porta neque ut eleifend. In aliquet aliquam mauris, eu gravida massa vestibulum sed. Phasellus at nunc eu eros viverra placerat. Donec at sapien id augue tincidunt dapibus. Fusce elementum bibendum mollis. Praesent ac massa tempus, feugiat est ac, dapibus nunc. Vestibulum pulvinar tempus nunc, mattis pharetra dolor suscipit sed. Curabitur risus nibh, tempor in vehicula mattis, vulputate id ipsum.
    </li>
<li class="title">lable Three</li>
<li class="content">
<h2>Praesent fringilla vestibulum magna.</h2>
Praesent fringilla vestibulum magna. Quisque posuere ac justo nec vestibulum. Cras pretium orci et lacus placerat, nec ultrices ipsum facilisis. Mauris ut est in mi hendrerit facilisis ut tristique velit. Vivamus vitae ullamcorper risus. Cras erat tortor, dapibus accumsan fringilla non, fermentum eu tellus. Quisque venenatis, lorem venenatis iaculis elementum, libero diam scelerisque mi, vel rhoncus nibh leo quis massa. Pellentesque a neque sit amet ante mattis imperdiet eget ut metus. Cras quam velit, ullamcorper molestie accumsan ac, porttitor ac quam. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse potenti. Nam id tellus risus. Morbi dapibus ipsum eu massa congue imperdiet. Sed et accumsan arcu, id lobortis nisl. Proin porttitor, libero ac rhoncus ullamcorper, orci libero tempus urna, non lacinia ipsum nulla sed sapien. Phasellus tempor vulputate pharetra.
    </li>
</ul>

For now, this all looks like a normal list, right? Let’s add some style to it. Notice that the list item with the class of “content” will be hidden:

#accordion {
    margin:100px auto;
    padding:0;
    max-width:760px;
    }
#accordion li {
    list-style:none;
    }
#accordion li.content {
    margin:0;
    padding: 10px;
    border: 1px solid #efefef;
    background: #FFF;
    }
#accordion li.title {
    padding:10px;
    font-size:1.2em;
    line-height:2em;
    color:#FFF;
    background: #3498db;
    border-bottom: 1px solid #2980b9;
    }
#accordion .hide {
    display:none;
    }

But wait… now all the content is hidden so.. what’s the point? Well, here’s where the jQuery takes place to show the content of the group’s title we clicked on. And by default, always the first groups content will be show. If we click on the second group’s title, the first one will be hidden and the second content will be show. Remember the titles are always visible. Here’s our jQuery code:

$(document).ready(function() {
    $('#accordion li.content').filter(':nth-child(n+4)').addClass('hide');
    $('ul').on('click','li.title',function() {
        $(this).next().slideDown(200).siblings('li.content').slideUp(200);
        })
});

Also, if the animation doesn’t work for you, that’s because we haven’t included the core jQuery code into our project. If you’re not working on a big project you can use a hosted script, if you’re using this in a big project then it’s recommended to download the script and host it alongside the other project files.

You can find the core jQuery code here :

  • CDN Hosted – Google Libs / jQuery.com
  • Download jQuery – jQuery.com

And if you don’t want to use jQuery to achieve this effect, check out my tutorial about how to create a pure css accordion