Fix behavior of collapse/expand blocks

Question

I use bootstrap 4 alpha 6 version. I have several blocks in my page. I want expand/collapse these blocks by clicking main button (id='expand-collapse'). Also every button has there own individual buttons which would open/close concrete block. Right know I use next js code and have strange behavior.

For example: I open first block by clicking first button, then I click main button (id='expand-collapse') to open other blocks. But in fact first block closed and other blocks opened. 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/CLOSE 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/CLOSE 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/CLOSE THIRD</a>
                <div class="collapse block" id="block-3">
                   THIRD BLOCK
                </div>
            </div>

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

JAVASCRIPT:

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

    });
  });
});

There is a typo here in the tag for the first block. It is - . But it should be - OPEN/CLOSE FIRST — T.Shah, May 05 '17 at 07:42
Looks like you've already asked this [here](http://stackoverflow.com/questions/43788941/expand-collapse-several-blocks-at-the-same-time) — Carol Skelly, May 05 '17 at 08:31
@T.Shah Hello! Yes, I update post. Do you have any ideas how to fix this behavior? — Nurzhan Nogerbek, May 05 '17 at 08:55
@ZimSystem Hello! I asked the same question before, but in this cause question about strange behavior. Do you have any ideas? — Nurzhan Nogerbek, May 05 '17 at 08:56

score 0 · Answer 1 · answered May 05 '17 at 11:40

That kind of behaviour is due to data-toggle attribute. Take that off from the main button and change the script to this- HTML

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

JQUERY:

             $(function() {
             var showAll = false;
            $('#expand-collapse').on('click', function() {
              var target = $(this).attr('data-target');
              //console.log('showAll=' + showAll);
              $(target).each(function() {                     
                  if(showAll === false)  {
                        $(this).collapse('show');
                  }
                  else {
                    $(this).collapse('hide');
                  }
              });

              if(showAll === false) {
                  showAll = true;
              }
              else {
                  showAll = false;
              }

              //console.log('showAll=' + showAll);
            });
          });

Hello! Do you tested this your code? I steal have this strange behaviour. I have warning in this line: `if(showAll === false) {`. It seems something is missing. I am little bit comfused. — Nurzhan Nogerbek, May 05 '17 at 17:42
So what can you say me? I tested this code but it didnt work. — Nurzhan Nogerbek, May 06 '17 at 17:44

Fix behavior of collapse/expand blocks

1 Answers1