CODEWITHSUNDEEP
htmlbootstrap-4toggle
Kazi Xu
Kazi Xu

Reputation: 15

Unable to Collapse Multiple Items

I am learning how to use bootstrap to make an Expand/Collapse button. I have two items that can Expand/Collapse when clicked on and I also have a main Expand/Collapse for all items. The issue is when one item is expanded, and the other is not. The main Expand/Collapse button will close the first one but open the second one. How can I make the main button to Expand/Collapse whether the items are Expanded or not?

<div class="container">
<button type="button" class="btn btn-primary">Expand/Collapse</button>

  <div class="card">  
    <div class="card-body">
      <button class="card-title" data-toggle="collapse" data-target="#collapse" aria-expanded="false" aria-controls="collapse">Test</button>

      <div class="card-text" id="collapse">
      test
      </div>


      <button class="card-title" data-toggle="collapse" data-target="#collapse1" aria-expanded="false" aria-controls="collapse">
        <strong>Test2</strong>
      </button>

      <div class="card-text" id="collapse1">
     Beta2
      </div> 

    </div>
  </div>

below is the code for the main button:

$(".btn-primary").click(function(){
    $(".card-text").collapse('toggle');
});

Upvotes: 0

Views: 302

Answers (2)

Carol Skelly
Carol Skelly

Reputation: 362800

This was answered for Bootstrap 3.x here, and the concept is still the same, the individual collapse elements have there own Expand/Collapse state, and all the button is doing right now is toggling the state of each button.

The expand/collapse all button must track the current state of "Expand" or "Collapse" ALL.

$(".btn-primary").click(function(){

    if ($(this).data("closedAll")) {
        $(".collapse").collapse("show");
    }
    else {
        $(".collapse").collapse("hide");
    }

    // toggle state and remember it
    $(this).data("closedAll",!$(this).data("closedAll")); 
});

// init with all closed
$(".btn-primary").data("closedAll",true);

Demo: https://codeply.com/go/i5h1tBmTaa

Upvotes: 1

dmcshehan
dmcshehan

Reputation: 1269

I did not 100% understand your question, But I wrote a snippet on jsfiddle to work accordingly as I understood.

The best way is to use conditional statements to check whether those components are collapsed or not. Based on that we can use collapse methods which are mentioned in the bootstrap docs

<div class="container mt-5">
  <button id="main-button" type="button" class="btn btn-primary mb5">Expand/Collapse</button>

  <div class="card">  
    <div class="card-body">

    <button type="button" class="btn btn-info d-block m-2" data-toggle="collapse" data-target="#demo1">Demo 01</button>
    <div id="demo1" class="collapse">
      Lorem ipsum dolor sit amet
    </div>


    <button type="button" class="btn btn-info d-block m-2" data-toggle="collapse" data-target="#demo2">Demo 02</button>
    <div id="demo2" class="collapse">
      Lorem ipsum dolor sit amet
    </div>

  </div> 
</div>

This is the jQuery part

$('.collapse').collapse();


$('#main-button').on('click',function(){
  let demo1 = $('#demo1');
  let demo2 = $('#demo2');

  if(demo1.hasClass('show') && demo2.hasClass('show')){
    demo1.collapse('hide');
    demo2.collapse('hide');
  }

  if((demo1.hasClass('show') === false) && (demo2.hasClass('show') === false) ){
    demo1.collapse('show');
    demo2.collapse('show');
  }

  if((demo1.hasClass('show') === false) && (demo2.hasClass('show') === true) ){
    demo2.collapse('hide');
  }

  if((demo1.hasClass('show') === true) && (demo2.hasClass('show') === false) ){
    demo1.collapse('hide');
  }


});

I wrote it in js fiddle, click HERE to see it.

Upvotes: 0

Related Questions