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

score 3 · Answer 1 · edited Jun 20 '20 at 09:12

3

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

edited Jun 20 '20 at 09:12

Community

1
1

answered May 04 '17 at 17:31

Mayank Raj

1,574
11
13

I have next problem. Strange behavior. Every block has there own button to expand/collapse block. It mean that all 3 block has 3 button which will open/close concrete block. Also I has main button which open all blocks. When I open lets say first block and then click main button to open other blocks next your code close first block and open others. Do you have any ideas about that? Also can you check my post again pls. I am tring to change icon of main button but it didnt work. I dont understand why cause it was worked before. – Nurzhan Nogerbek May 04 '17 at 17:49
Hello! Do you tried to add individual buttons. Just try to add them and test pls. What do you think about this behavior? – Nurzhan Nogerbek May 05 '17 at 04:12
Hello! What exactly you changed? It seems like you only add individual buttons. I steal see that strange behiavier. Try to open first block then open other blocks by main button. You will see that first block close and other blocks opened. Just try. – Nurzhan Nogerbek May 05 '17 at 17:30
@NurzhanNogerbek, that's expected right ? Each of the four button should toggle the block state controlled by it. So the master button toggles the state of the three blocks and each 3 buttons toggle the state of the respective block – Mayank Raj May 05 '17 at 18:40
Well its not right. Lets say if you open first block and then try to open other blocks by main button first block must be steal opened. I say about that. In fact first block close and others opened. – Nurzhan Nogerbek May 06 '17 at 03:58
So do you have any other ideas? I really need help. – Nurzhan Nogerbek May 06 '17 at 17:40

Sterling Beason · Answer 2 · 2017-05-04T17:33:43.310

0

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

edited May 04 '17 at 17:33

answered May 04 '17 at 17:10

Sterling Beason

622
6
12

Hello! I tried this code but in didnt close all blocks. Do you have any other ideas? – Nurzhan Nogerbek May 04 '17 at 17:16
I also tried this before. Didnt work. Little bit comfused. – Nurzhan Nogerbek May 04 '17 at 17:29
In mine, remove that a like Sumit recommended. Try that and see – Sterling Beason May 04 '17 at 17:34

Sumit Ridhal · Answer 3 · 2017-05-04T17:35:13.813

0

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.

edited May 04 '17 at 17:35

answered May 04 '17 at 17:23

Sumit Ridhal

1,359
3
14
30

Ok, but how to close blocks? Do you have ideas about that? – Nurzhan Nogerbek May 04 '17 at 17:29

Expand/Collapse several blocks at the same time?

3 Answers3

Linked