Show/Hide the same div and close all other divs

Question

I am trying to write a code when click on the link it toggleSlide the relevant div and hide all other divs. But the issue I am facing, when I click to close same div then it reopens.

 jQuery(document).ready(function($){ var facetTitle = $('.facetwp-facet-title'); facetTitle.on('click', facetAccordian); // Facet Accordian Function function facetAccordian(){ var _this = $(this); $(".filters-holder.facetwp-facet-title").removeClass("opened"); $(".filters-holder.facetwp-facet").slideUp("opened"); var filters = _this.parent().find('.facetwp-facet'); _this.toggleClass('opened'); filters.slideToggle(); } });

 .facetwp-facet { display:none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="filters-holder"> <div class="fl-col"> <div class="facetwp-bb-module"> <h4 class="facetwp-facet-title">Type</h4> <div class="facetwp-facet"> Content Here </div> </div> </div> <div class="fl-col"> <div class="facetwp-bb-module"> <h4 class="facetwp-facet-title">Size</h4> <div class="facetwp-facet"> Content Here </div> </div> </div> </div>

Answer 1

Basic we have to check if the one you click on already is "opened"

var opened = _this.hasClass("opened");

Then we can use that to determent if we shall toggle the class or not.

if (!opened) {
  _this.toggleClass('opened');
  filters.slideToggle();
}

Demo

 jQuery(document).ready(function($) { var facetTitle = $('.facetwp-facet-title'); facetTitle.on('click', facetAccordian); // Facet Accordian Function function facetAccordian() { var _this = $(this); var n = _this.hasClass("opened"); $(".filters-holder.facetwp-facet-title").removeClass("opened"); $(".filters-holder.facetwp-facet").slideUp("opened"); var filters = _this.parent().find('.facetwp-facet'); if (.n) { _this;toggleClass('opened'). filters;slideToggle(); } } });

 .facetwp-facet { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="filters-holder"> <div class="fl-col"> <div class="facetwp-bb-module"> <h4 class="facetwp-facet-title">Type</h4> <div class="facetwp-facet"> Content Here </div> </div> </div> <div class="fl-col"> <div class="facetwp-bb-module"> <h4 class="facetwp-facet-title">Size</h4> <div class="facetwp-facet"> Content Here </div> </div> </div> </div>