How to make Accordion with HTML, CSS and jQuery

In this tutorial, creating the accordion using 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.

How to make Accordion with 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("slow");
        }

    });

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

4. Demo


4. 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.

Spread the love

Related Post

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *