Expand/Collapse Several Blocks At The Same Time?

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

Solution 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

Solution 2:

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');
            }
          });
       });
});

Solution 3:

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.