Create a Responsive jQuery Accordion

In this post I am going to show you how to create an accordion that will slide down on click using CSS and jQuery. There are a lot of tutorials out there that will show you how to do something similar to this but what I like about this accordion is that it uses <div>’s of content rather than list items for each of the accordion sections. A lot of tutorials show how to make menu-style accordions but not necessarily ones for any content that you want. That’s what this aims to accomplish.

Before we start, I think I should mention that this accordion is not technically “responsive” in the sense that it has any media queries attached to it, only that the percentage-width based fluidity of it should allow you to fit it into any content area as the viewport resizes.

View Demo

It’s also going to be “vanilla” enough such that it’s not overstyled to the point where you’re going to have to undo a lot of the styling to fit the theme of your website (should you want to integrate it). It’s going to be fairly bland, boilerplate, and basic, but that’s always a good place to build from.

The width of the accordion is going to be percentage based so that it should adapt well for responsive designs as well.

So start and we’re going to lay out our basic structure in the HTML….

<div class="accordion">
  <div class="accordionHeader"><span>One</span></div>
  <div class="accordionContent">Mauris quis tellus sed mi bibendum vulputate. Nam nec fermentum leo. Donec ante nisl, varius nec scelerisque nec, pulvinar id ipsum. Phasellus sodales tellus quis odio tincidunt quis feugiat sapien mollis. Ut hendrerit nisl eu turpis mattis sit amet accumsan ante pretium. 
  </div> 
  <div class="accordionHeader"><span>Two</span></div>
  <div class="accordionContent">Vestibulum neque justo, rutrum eu interdum sed, aliquam sit amet nulla. Pellentesque ultricies enim sit amet urna fringilla venenatis. Etiam eleifend dolor ut felis sagittis quis dignissim neque venenatis. In posuere tempus sodales. Aliquam tellus ante, posuere vitae congue at, tempus sed dolor. Etiam ac urna leo, at pellentesque augue osuere vitae congue at. Imperdiet ac euismod leo viverra. Maecenas convallis, lectus sit amet eleifend vehicula, sapien sem pretium dolor, in tincidunt est sapien eget orci. Sed vel libero urna. Aliquam ornare sodales egestas. Duis feugiat vulputate libero id tempor. Pellentesque elementum molestie nisi ac elementum
  </div> 
  <div class="accordionHeader"><span>Three</span></div>
<div class="accordionContent">Nunc elit nisl, vestibulum ac laoreet nec, cursus sed leo. Aenean sit amet nibh justo. Quisque dui arcu, pharetra non sollicitudin nec, rhoncus at ligula. Etiam placerat porttitor adipiscing. Aenean fermentum nulla a justo malesuada id pulvinar urna sagittis. Morbi urna orci, faucibus sed sollicitudin sit amet, faucibus dictum massa. In sit amet enim at nisi rutrum vulputate. Vestibulum quis mattis nulla. Duis viverra orci ut enim tincidunt auctor. Ut molestie eros eget mauris consectetur eget tristique arcu elementum. </div> 
  <div class="accordionHeader"><span>Four</span></div>
  <div class="accordionContent">Nulla sollicitudin laoreet nulla quis suscipit. Curabitur tristique, dolor vel condimentum molestie, purus leo sodales enim, ac vehicula sem est eget eros. Sed vehicula, metus vel convallis tempus, mauris lorem tristique ipsum, ac condimentum arcu tellus vel nisi. Aliquam mauris est, adipiscing a pharetra ut, molestie egestas mi. Fusce vulputate blandit sagittis. Praesent eget dignissim felis. Integer ac libero eu felis congue cursus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce vel dui a sapien posuere consequat in quis mi. Proin eros nisi, lacinia id tempus id, congue eget justo. Proin ac justo non mi pretium vehicula sed id odio. Vivamus felis nibh, facilisis ut adipiscing at, blandit vitae magna. Praesent tellus est, molestie ut elementum at, pretium nec eros. Etiam diam nisl, varius non gravida eu, facilisis eu nunc.  
  </div>

Seems straightforward enough. We’ve basically just defined a header item for the accordion titles and a content section for each wrapped into a wrapper <div> with the class “accordion”…

With that out of the way, we can give it a little bit of styling using CSS…

.accordion .accordionHeader {
  display: block;
  background: #eee;
  background: #eeeeee -moz-linear-gradient(top, #fcfcfc 0%, #eeeeee 100%);
  background: #eeeeee -webkit-linear-gradient(top, #fcfcfc 0%, #eeeeee 100%);
  background: #eeeeee -o-linear-gradient(top, #fcfcfc 0%, #eeeeee 100%);
  background: #eeeeee -ms-linear-gradient(top, #fcfcfc 0%, #eeeeee 100%);
  background: #eeeeee linear-gradient(top, #fcfcfc 0%, #eeeeee 100%);
  border: 1px solid #ccc;
  border-radius: 3px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  padding: 10px;
  font-size: 16px;
  font-weight: normal;
  cursor: pointer;
  margin-bottom: 10px;
}
.accordion .accordionHeader span {
  background: url(images/plus.png) center left no-repeat;
  padding-left: 30px;
}
.accordion .accordionHeader:hover {
  background: #fcfcfc;
}
.accordion .activeItem span {
  background: url(images/minus.png) center left no-repeat;
}
.accordion .accordionContent {
  margin-bottom: 10px;
}

And lastly we can bring it to life with jQuery…

$(document).ready(function () {
    var nbsAccordionSliding = false;
    $('.accordion').find('.accordionHeader').click(function() {
        if(!nbsAccordionSliding) {
            nbsAccordionSliding = true;
            $(this).toggleClass('activeItem') 
            $(this).next().slideToggle({duration: 300, queue: false, easing: 'linear', complete: function() {
                nbsAccordionSliding = false;
            }});
        }
    }).next().hide();
});

UPDATE: What if you wanted to have everything collapse and only show one at a time. To do that, you’ll want to replace the $(document).ready code block with the following…

$(document).ready(function () {
    var nbsAccordionSliding = false;
    $('.accordion').find('.accordionHeader').click(function() {
        $('.accordionHeader').removeClass('activeItem');
        $(this).addClass('activeItem');
        if(!nbsAccordionSliding) {
            nbsAccordionSliding = true;            
            if($(this).next().is(':visible')){            
                $(this).next().slideUp(function(){
                    nbsAccordionSliding = false;                
                });
            }            
            else {
                $('.accordion').find('.accordionHeader').next().slideUp();  
                $(this).next().slideToggle({duration: 300, queue: false, easing: 'linear', complete: function() {
                    nbsAccordionSliding = false;
                }});
            }
        }
    }).next().hide();
});

Click below to view the demo of the final finished product. If you like what you see, you can download the files and use them wherever you like

View Demo Download Files