Please enable Javascript for better experience...
Accordion Example in JQUERY
By Rahul Kumar Jha | May 27, 2015 | In Articles | Total Views [ 3996 ]
Taged In
(1 Like)
Rate

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.

Share this

About the Author

Rahul Kumar Jha
Rahul Kumar Jha
Founder, Developer dotnet-concept.com

Public profile: user/profile/99900001


Has working experience in different phases of Software Development Life Cycle (SDLC) in CMS, Gaming, Health Care and Financial Services domain using Agile pattern. Working experience in Design patterns, ASP.NET, MVC, ANGULAR, ANGULAR JS, Windows application, WCF, ADO.NET, SQL Server and Test Driven Development (TDD) environment with JQuery, JavaScript, N-Unit, Entity Frameworks, LINQ, Code Refactoring and Business Objects Models.

User's Comments


 
Please SignUp/Login to comment...

Or comment as anonymous...
* Name
* Email ID
Comment
 
 
 
 
 
 
Sponsors