Accordion using HTML, CSS and jQuery

In this tutorial, we are going to make 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.

Accordion using HTML,CSS, and jQUery

 Demo    Download

Contents

  1. HTML
  2. CSS
  3. jQuery

 


1. HTML

The HTML structure we will be using very simple. I have just wrapped the whole thing in a <div> with a class name accordion. We will use <h1> tags for our expand/collapse.

<!-- 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

Add some styling over our created HTML design. Set class .accordion-content display too none because we don’t want to show all accordion section content being shown to users when its first time was seen. We only want to show him section content according to its click. Which we are performing using jQuery.

.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

When an accordion <h1> tag is get clicked then we perform our work. Storing clicked <h1> tag id in a variable with name id then we loop over all elements which have contains class .accordion-content and checking it’s not be clicked <h1> tag next element in if statement.

$(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 */
});
});


Spread the love

Related Post

Be First to Comment

Leave a Reply

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