This code of auto collapse accordion works with jQuery without bootstrap. The specialty of this is when you expand 1 section all the other sections get collapsed automatically. This definitely save the space of your web page.

You’d love to check an enhanced version of this accordion. Dynamic Accordion jQuery snippet CSS & HTML

Using this type of auto collapse accordion is a best solution for mobile friendly navigation with sub menus.

Step 01 – Place the html markup where you want to place the accordion.

 <div class="accordion">
        <div class="accorfion-section">
            <a class="accordion-section-title" href="#accordion-1">Accordion section #1</a>
            <div id="accordion-1" class="accordion-section-content">
                <p>This is first accordion section</p>
            </div>
            <a class="accordion-section-title" href="#accordion-2">Accordion section #2</a>
            <div id="accordion-2" class="accordion-section-content">
                <p> this is second accordian section</p>
            </div>
            <a class="accordion-section-title" href="#accordion-3">Accordion section #3</a>
            <div id="accordion-3" class="accordion-section-content">
                <p> this is third accordian section</p>
            </div>
        </div>
    </div>

Step 02 – Place this CSS in your style sheet.

.accordion
{
    overflow:hidden;
    border-radius:4px;
    background:#f7f7f7;
}
.accordion-section-title
{
    width:100%;
    padding:15px;
}
.accordion-section-title
{
        width: 100%;
        padding: 15px;
        display: inline-block;
        background-color: #333;
        border-bottom: 1px solid #1a1a1a;
        font-size: 1.2em;
        color: #fff;
        transition: all linear 0.5s;
        text-decoration:none;
}
.accordion-section-title.active
{
    background-color:#4c4c4c;
    text-decoration:none;
    }
    .accordion-section-title:hover
    {
    background-color:grey;
    text-decoration:none;
}
.accordion-section:last-child .accordion-section-title
{
    border-bottom:none;
}
.accordion-section-content
{
    padding:15px;
    display:none;
}

Step 03 – Place this code in the bottom of your web page before the closing </body> tag jQuery included

<script src="http://code.jquery.com/jquery-1.9.0.js"></script>
<script>
$(document).ready(function(){
     $('.accordion-section-title').click(function(e){
         var currentAttrvalue = $(this).attr('href');
         if($(e.target).is('.active')){
             $(this).removeClass('active');
             $('.accordion-section-content:visible').slideUp(300);
         } else {
             $('.accordion-section-title').removeClass('active').filter(this).addClass('active');
             $('.accordion-section-content').slideUp(300).filter(currentAttrvalue).slideDown(300);
         }
     });
 });
</script>

You can simply change the colors, hover colors by editing the css. To change sliding time duration you can edit slideDown & slideUp timing in the javascript code.

Author

Hi! I’m Dimuthu Freelance Web Designer, Developer, Creative Graphic Designer, Digital Marketer & Successful Blogger. Hire me! if you need any support.

Write A Comment

Pin It