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>