How to make Accordion with HTML, CSS and jQuery

The accordion is a vertically stacked list of items. Each item can be “expanded” or “collapsed” to reveal the content associated with that item. There can be zero expanded items, exactly one, or more than one item expanded at a time, depending on the configuration.

Accordions are popular because they allow developers to force large amounts of content into tiny spaces on the page.

In this tutorial, I show how you can create the accordion using HTML, CSS, and jQuery.

---

Contents

1. HTML
2. CSS
3. jQuery
4. Demo
5. Conclusion

---

1. HTML

Create a <div class='accordion'> that contains accordion contents.

Using <h1> element for expand/collapse and create a <div class='accordion-content'> following with <h1>.

Completed Code

<!-- accordion (start) -->
<div class="accordion">
    <!-- accordion section 1 -->
    <h1 id="accordionhead_1">Heading1</h1>
    <div id="accordioncontent_1" class="accordion-content">
        Content 1
    </div>

    <!-- accordion section 2 -->
    <h1 id="accordionhead_2">Heading2</h1>
    <div id="accordioncontent_2" class="accordion-content">
        Content 2
    </div>

    <!-- accordion section 3 -->
    <h1 id="accordionhead_3">Heading3</h1>
    <div id="accordioncontent_3" class="accordion-content">
        Content 3
    </div>

    <!-- accordion section 4 -->
    <h1 id="accordionhead_4">Heading4</h1>
    <div id="accordioncontent_4" class="accordion-content">
        Content 4
    </div>
</div>
<!-- accordion (end) -->

---

2. CSS

By default set .accordion div element to display: none for not show all accordion section content to users when it first time load.

Completed Code

.accordion{
    width:70%;
    margin:0 auto;
}

/* accordion heading */
.accordion h1{
    font-size:26px;
    font-weight: normal;
    text-align: center;
    margin-bottom:0px;
    margin-top:0px;
    background-color:gainsboro;
    padding-top:7px;padding-bottom:7px;
    border:1px solid darkgrey;
    border-radius:3px;
}
.accordion h1:hover{
    cursor:pointer;
}

/* accordion section content */
.accordion div{
    display:none;
    padding:10px;
    height:200px;
    line-height:20px;
    border:1px solid gray;
    border-radius:3px;
}

@media screen and (max-width:480px){
    .accordion{
        width:100%;
        margin:0;
    }
}

---

3. jQuery

On the click of <h1> element hide opened <div > sections and show next <div > element following with <h1>.

Completed Code

$(document).ready(function(){
$(".accordion h1").click(function(){
    var id = this.id;   /* getting heading id */

    /* looping through all elements which have class .accordion-content */
    $(".accordion-content").each(function(){

        if($("#"+id).next()[0].id != this.id){
            $(this).slideUp();
        }

    });

    $(this).next().toggle();  /* Selecting div after h1 */
});
});

---

4. Demo

View Demo

---

5. Conclusion

I showed how you can create an accordion using HTML, CSS, and jQuery.

In the demonstration, I used <h1> element for the accordion header and expand/collapse sections when it gets clicked. You can use any other HTML element in the place of <h1> e.g. <span>,<div>,<h2>,etc.

View this tutorial to know accordion creation using jQuery UI.

If you found this tutorial helpful then don't forget to share.