In this article I will show simple implementation of accordion with the help of JQUERY.

Introduction

Accordion control is very common today to display multiple forms in one page as a section. You can divide your page into separate sections and can display them with the help of accordion. This is a simple example showing use and implementation of accordion.

Using the Code

Let's do step by step exercise. At the end of this article you will be able to implement accordion in your page very easily.

HTML

Create index.html and put these lines into your html page. In this example I have two sections to navigate.

In this example accordion is navigating with the help of id. a tag taking id (accordion-1) from href attribute and opening accordion accordingly.

<div class="body-content">
        <h3>Accordion Example</h3>
    <hr />
    <div class="accordion">
        <div class="accordion-section">
            <a class="accordion-section-title color-box1" href="#accordion-1"><strong>First Accordion Section</strong></a>
            <div id="accordion-1" class="accordion-section-content">
                <p>This is body</p>
            </div>
        </div>
        <div class="accordion-section">
            <a class="accordion-section-title color-box2" href="#accordion-2"><strong>Second Accordion Section</strong></a>
            <div id="accordion-2" class="accordion-section-content">
                <p>This is second body</p>
            </div>
        </div>
    </div>
</div>

Add refereces to Head Section

Add these reference into head section

   <link rel="stylesheet" type="text/css" href="CSS/accordion.css">
    <script type="text/javascript" src="JS/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="JS/accordion.js"></script>

CSS

Add accordion.css file into css folder and copy below style there.

.accordion, .accordion * {
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box;
}

.accordion {
    overflow:hidden;
    box-shadow:0px 1px 3px rgba(0,0,0,0.25);
    border-radius:0px;
    background:#fff;
    }

/*----- Section Titles -----*/
.accordion-section-title {
    width:100%;
    padding:12px;
    display:inline-block;
    transition:all linear 0.15s;
    /* Type */
    font-size:1.2em;
    color:#fff;
}

.accordion-section-title.active, .accordion-section-title:hover {
    text-decoration:none;
    background-color:#666;
    border-bottom:1px solid #ccc;
    color:#fff;
}

.accordion-section:last-child .accordion-section-title {
    border-bottom:none;
}
/*----- Section Content -----*/
.accordion-section-content {
    padding:10px;
    display:none;
}
.color-box1 {background-color: #4BC1E1;border-bottom:1px solid #ccc;} 
.color-box2 {background-color: #78C343;border-bottom:1px solid #ccc;} 

JQUERY Script

Create accordion.js file into JS folder and put below code there.

jQuery(document).ready(function() {
    function close_accordion_section() {
        jQuery('.accordion .accordion-section-title').removeClass('active');
        jQuery('.accordion .accordion-section-content').slideUp(300).removeClass('open');
    }

    jQuery('.accordion-section-title').click(function(e) {
        // Get anchor tag value
        var currentAttrValue = jQuery(this).attr('href');

        if(jQuery(e.target).is('.active')) {
            close_accordion_section();
        }else {
            close_accordion_section();

            // Add active class to section title
            jQuery(this).addClass('active');
            // Open up the hidden content panel
            jQuery('.accordion ' + currentAttrValue).slideDown(300).addClass('open'); 
        }

        e.preventDefault();
    });
});

Open index.html into browser and you will see your sections ready. I hope now you can implement accordion into your pages very easily.