Force accordion to close all tabs

Question

I tried to search for a solution before asking this question but unfortunately, I can't reach any answer on my code!

I want to force all accordion tabs to close, so the user can open or close as he prefer.

My code is:

jQuery(".tap-title").each(function(){
    jQuery(this).click(function() {
        if (jQuery(this).parent().parent().hasClass("toggle-accordion")) {
            jQuery(this).parent().find("li:first .tap-title").addClass("active");
            jQuery(this).parent().find("li:first .tap-title").next(".accordion-inner").addClass("active");
            jQuery(this).toggleClass("active");
            jQuery(this).next(".accordion-inner").slideToggle().toggleClass("active");
            jQuery(this).find("i").toggleClass("fa-plus").toggleClass("fa-minus");
        }else {
            if (jQuery(this).next().is(":hidden")) {
                jQuery(this).parent().parent().find(".tap-title").removeClass("active").next().slideUp(200);
                jQuery(this).parent().parent().find(".tap-title").next().removeClass("active").slideUp(200);
                jQuery(this).toggleClass("active").next().slideDown(200);
                jQuery(this).next(".accordion-inner").toggleClass("active");
                jQuery(this).parent().parent().find("i").removeClass("fa-minus").addClass("fa-plus");
                jQuery(this).find("i").removeClass("fa-plus").addClass("fa-minus");
            }
        }
        return false;

    });
});

My HTML code is:

    <div class="col-md-6">
        <div class="title-section text-left">
            <h4 class="bold">Normal Horizontal Tabs</h4>
        </div>      
        <scrip> 
        <div class="accordions-style1">
            <div class="section-content">
                <h4 class="tap-title active"><a href="#">What Is Yamen?<i class="fa fa-minus"></i></a></h4>
                <div class="tap-inner" style="display: block;">
                    <p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
                </div>
            </div>
            <div class="section-content">
                <h4 class="tap-title"><a href="#">Why Should I purchase this template?<i class="fa fa-plus"></i></a></h4>
                <div class="tap-inner" style="display: none;">
                    <p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
                </div>
            </div>
            <div class="section-content">
                <h4 class="tap-title"><a href="#">What about features?<i class="fa fa-plus"></i></a></h4>
                <div class="tap-inner" style="display: none;">
                    <p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
                </div>
            </div>
        </div>
    </div>

Answer 1

I found the answer on my question with @mohamed-yousef help, thank you very much mate.

I replaced my jQuery code with this one:

jQuery(".tap-title").each(function(){
    jQuery(this).click(function() {
        if (jQuery(this).parent().parent().hasClass("toggle-accordion")) {
            jQuery(this).parent().find("li:first .tap-title").addClass("active");
            jQuery(this).parent().find("li:first .tap-title").next(".accordion-inner").addClass("active");
            jQuery(this).toggleClass("active");
            jQuery(this).next(".accordion-inner").slideToggle().toggleClass("active");
            jQuery(this).find("i").toggleClass("fa-plus").toggleClass("fa-minus");
        }else {
            if (jQuery(this).next().is(":hidden")) {
                jQuery(this).parent().parent().find(".tap-title").removeClass("active").next().slideUp(200);
                jQuery(this).parent().parent().find(".tap-title").next().removeClass("active").slideUp(200);
                jQuery(this).toggleClass("active").next().slideDown(200);
                jQuery(this).next(".accordion-inner").toggleClass("active");
                jQuery(this).parent().parent().find("i").removeClass("fa-minus").addClass("fa-plus");
                jQuery(this).find("i").removeClass("fa-plus").addClass("fa-minus");
        }else{
                jQuery(this).toggleClass("active").next().slideToggle(200);
                jQuery(this).next(".accordion-inner").toggleClass("active");
                jQuery(this).parent().parent().find("i").removeClass("fa-minus").addClass("fa-plus");
        }
        }
        return false;
    });
});

And replaced my HTML code with this one:

    <div class="col-md-6">
        <div class="title-section text-left">
            <h4 class="bold">Normal Horizontal Tabs</h4>
        </div>      
        <scrip> 
        <div class="accordions-style1">
            <div class="section-content">
                <h4 class="tap-title"><a href="#">What Is Yamen?<i class="fa fa-plus"></i></a></h4>
                <div class="tap-inner" style="display: none;">
                    <p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
                </div>
            </div>
            <div class="section-content">
                <h4 class="tap-title"><a href="#">Why Should I purchase this template?<i class="fa fa-plus"></i></a></h4>
                <div class="tap-inner" style="display: none;">
                    <p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
                </div>
            </div>
            <div class="section-content">
                <h4 class="tap-title"><a href="#">What about features?<i class="fa fa-plus"></i></a></h4>
                <div class="tap-inner" style="display: none;">
                    <p>Duis dapibus aliquam mi, eget euismod scelerisque ut. Vivamus at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.Duis dapibus aliquam mi, eget euismod scelerisque at elit quis urna adipiscing , Curabitur vitae velit in neque dictum blandit. Duis dapibus aliquam mi, eget euismod sceler ut.</p>
                </div>
            </div>
        </div>
    </div>

Answer 2

First off, just as a friendly piece of advice, you can replace jquery() functions with $() , (eg. $('.tap-title').each(function(){...});)

Second of all, although I don't quite understand your structure of your HTML as you didn't supply that with your question, but by the looks of it, it looks as if you are toggling the accordion with classes?

So I would do something along the lines of targeting the .active class and then removing the .active class on itself and sliding it up? Supplying the HTML code would have helped me a lot, but hope this helps.

Answer 3

Assuming you are using jquery-ui accordion I believe this will work:

$('.ui-accordion-header').removeClass('ui-accordion-header-active ui-state-active ui-corner-top').addClass('ui-corner-all').attr({
    'aria-selected': 'false',
    'tabindex': '-1'
});
$('.ui-accordion-header-icon').removeClass(icons.headerSelected).addClass(icons.header);
$('.ui-accordion-content').removeClass('ui-accordion-content-active').attr({
    'aria-expanded': 'false',
    'aria-hidden': 'true'
 }).hide();

Answer 4

Basic Accordion:

HTML:

<div class="accordion">
  <div class="accordion-head">
    title here
  </div>
  <div class="accordion-body">
    content here
  </div>
</div>

CSS:

.accordion-body{
   display:none;
}

jQuery (or $() instead of jQuery())

jQuery(document).ready(function(){

  var items = jQuery('.accordion');
  var heads = items.find('.accordion-head);


  heads.click(function(){

     var i = jQuery(this);

     items.find('.accordion-body').slideUp(); // close all accordions
     i.next('.accordion-body').slideDown();


  });

});