Only allow one data-toggle at a time for multiple options

Question

I'm a beginner with javascript and jquery, I am using opencart and a filter extension.

I am trying to get only one data-toggle to show at a time.

The filter extension has multiple options like category, size, category, colour, etc. Each option when clicked shows a hidden div when when clicked again hides it.

Each option can be clicked and all hidden divs can be shown at the same time. I am trying to make only one option show at a time, so for example option A is clicked it opens but if option B is clicked while A is open - B opens and A closes. Kind of like a toggle.

I believe the javascript doing this is in the bootstap.js include. But each option clicked does this to it's html:

When a option is clicked (Open):

<div class="af-container"> 
<div class="af-heading af-collapse collapsed" data-toggle="collapse" aria-expanded="false" data-target="#s"> 
<p>Category:</p><span></span> 
</div> 
<div aria-expanded="false" id="s" class="af-elements collapse" style="height: 0px;"> 
</div> 
</div>

When open collapsed class is added and aria-expanded is set to "false", in the div below aria-expanded is set to "false" also.

When an open option is click (Closed):

<div class="af-container"> 
<div class="af-heading af-collapse" data-toggle="collapse" aria-expanded="true" data-target="#s"> 
<p>Category:</p><span></span> 
</div> 
<div aria-expanded="true" id="s" class="af-elements collapse in" style=""> 
</div> 
</div>

When closed collapsed class is removed and aria-expanded is set to "true" and in the following div aria-expanded is set to "true" and in class is added to div, also height is removed from style.

The "html" code seems to be within a .tag file:

 <af_group>
    <div class="af-container">
        <div class="af-heading af-collapse" data-toggle="collapse" data-target="#{filter.name}_{filter.group_id}_{opts.filter_id}" aria-expanded="true">
            <p class="title">{filter.caption}</p><span></span>
        </div>
        <div id="{filter.name}_{filter.group_id}_{opts.filter_id}"  class="af-elements collapse {filter.collapse == '0'?'in':''}" aria-expanded="true">
            <div class="af-wrapper">
                <div data-is='af_group_{filter.type}' filter={filter} filter_id={opts.filter_id}></div>
            </div>
        </div>
    </div>
    </af_group>

What is the best way to only have one open at a time? Is there a simple solution or would maybe javascript that overrides / adds to the bootstrap.js (if it is that) to allow only one collapsed class to be allowed at a time for example?

Any help would be appreciated!

Answer 1

var $myGroup = $('#myGroup');
$myGroup.on('show.bs.collapse', '.collapse', function(e) {
    $myGroup.find('.collapse.show').collapse('hide');
});

Answer 2

This is an example with out changing the aria tags.

I added some css so we can see how it works

Hope this helps :)

//Event listener
$('div[data-toggle="collapse"]').parent().click(function() {
  $('div[data-toggle="collapse"]').each(function() {
    //Reset values for all
    $(this).addClass('collapsed');
    $(this).next().removeClass('in');
  })
  //Change values for the selected one
  $(this).children().removeClass('collapsed');
  $(this).children().next().addClass('in');
})

.af-container {
  background-color: pink;
  border: 1px lightblue solid;
  width: 50px;
  height: 50px;
  display: inline-block;
  position: relative;
}

.af-container .collapsed {
  background-color: lightblue;
  border: 1px pink solid;
  width: 50px;
  height: 50px;
  display: inline-block;
}

.dropdown {
  background-color: tomato;
  border: 1px pink solid;
  width: 50px;
  height: 50px;
  display: inline-block;
  position: absolute;
  top: 65px;
  display: none;
}

.in{
  display: block;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="af-container">
  <div class="af-heading af-collapse collapsed" data-toggle="collapse" aria-expanded="false" data-target="#s">
  </div>
  <div class="dropdown"></div>
</div>
<div class="af-container">
  <div class="af-heading af-collapse collapsed" data-toggle="collapse" aria-expanded="false" data-target="#s">  </div>
  <div class="dropdown"></div>

</div>
<div class="af-container">
  <div class="af-heading af-collapse collapsed" data-toggle="collapse" aria-expanded="false" data-target="#s">  </div>
  <div class="dropdown"></div>

</div>

The problem in your site is that you have two element in question.

1. The button
2. The dropdown

I thought the secon one was a children from the first one. I was wrong.

In your case they are siblings. I addapted my snippet to represent this.

If you paste the next code in your site, it should work like a charm.

$('div[data-toggle="collapse"]').parent().click(function(){
    $('div[data-toggle="collapse"]').each(function(){
        //Reset values for all
        $(this).next().removeClass('in');
      })
      //No need to add anything, your site does this for you
});