Expand/Collapse several blocks at the same time?

Question

I have several blocks in my page. I use bootstrap 4 alpha 6 version. I want expand/collapse these blocks by clicking one button. Right know I use next js code and it only open all blocks but how to close them?! How to fix this problem?

HTML:

<div class="card">
   <div class="card-header">
      <button id='expand-collapse' type="button" data-parent="#blocks"  data-toggle="collapse" data-target=".block" aria-expanded="false" aria-controls=".block">
      </button>
   </div>

   <div class="card-block">
       <div id="blocks">
          <div class="list-group">

             <div class="list-group-item">
                <a data-toggle="collapse" href="#block-1" aria-expanded="false" aria-controls="block-1"OPEN FIRST</a>
                <div class="collapse block" id="block-1">
                   <!--FIRST BLOCK BLOCK-->
                </div>
             </div>

             <div class="list-group-item">
                <a data-toggle="collapse" href="#block-2" aria-expanded="false" aria-controls="block-2">OPEN SECOND</a>
                <div class="collapse block" id="block-2">
                   <!--SECOND BLOCK-->
                </div>
            </div>

            <div class="list-group-item">
                <a data-toggle="collapse" href="#block-3" aria-expanded="false" aria-controls="block-3">OPEN THIRD</a>
                <div class="collapse block" id="block-3">
                   <!--THIRD BLOCK-->
                </div>
            </div>

         </div>
      </div>
   </div>
</div>

JAVASCRIPT:

$(function() {
  $('#expand-collapse').on('click', function() { // We capture the click event
    var target = $(this).attr('data-target'); // We get teh target element selector
    $(target).each(function() { // Loop through each element
      if ($(this).hasClass('show')) { // Check if it's already visible or not
        $(this).collapse('hide'); // Show and hide accordingly
      } else {
        $(this).collapse('show');
      }

    });
  });
});

$(document).ready(function () {
    $('.collapse')
        .on('shown.bs.collapse', function(event) {
          event.stopPropagation();
            $(this)
                .parent().parent()
                .find(".fa-commenting-o")
                .removeClass("fa-commenting-o")
                .addClass("fa-commenting");
        }).on('hidden.bs.collapse', function(event) {
         event.stopPropagation();
            $(this)
                .parent().parent()
                .find(".fa-commenting")
                .removeClass("fa-commenting")
                .addClass("fa-commenting-o");
        });
});

Answer 1

The code that youve used will work as expected in bootstrap3 due to the way collapse was handled then (You can verify it by using JS & CSS of bootstrap V3)

Comming to solving your problem the following snippet would work as expected:

$(function() {
  $('#expand-collapse').on('click', function() { // We capture the click event
    var target = $(this).attr('data-target'); // We get teh target element selector
    $(target).each(function() { // Loop through each element
      if ($(this).hasClass('show')) { // Check if it's already visible or not
        $(this).collapse('hide'); // Show and hide accordingly
      } else {
        $(this).collapse('show');
      }

    });
  });
});

TIP:

We can also pass toggle argument to the collapse function and get rid of the if-else condition

$(this).collapse('toggle'); can be used to replace the if-else

But I did not use this in my example to show that you can add additional computation in it

Working Fiddle

UPDATE: The updated question asks for individual control for the block

To acheive that, we can use the default method of triggering the action with a button element.

      <div class="list-group-item">
        <div class="collapse block" id="block-1">
          FIRST BLOCK
        </div>
      </div>
      <button class="btn btn-primary" type="button" data-toggle="collapse" data-target="#block-1">
        Block 1
      </button>

You can find the updated jsFidde here

Answer 2

There is an error with the Bootstrap v4.0.0-alpha.6 version with the transitioning that will be solved on the next release.

See the issue 22256 and pull 21743 links for more information.

Answer 3

Add an else statement to handle all other cases that don't match the criteria to show. Try this:

$(function () {

       $('#expand-collapse').on('click',function(){
         $('[data-toggle="collapse"]').each(function(){
            var objectID=$(this).attr('data-target');
            if($(objectID).hasClass('.collapse')===false)
            {
                $(objectID).collapse('show');
            } else {
                $(objectID).collapse('hide');
            }
          });
       });
});