Как раскрыть и закрыть несколько блоков одновременно?

Question

[nurzhannogerbek]

Здравствуйте! Помогите пожалуйста разобраться.

Есть несколько раскрываемых блоков, которые необходимо открывать и закрывать (Expand/Collapse) с помощью одной основной кнопки (id=expand-collapse). Также у каждого такого блока есть индивидуальная кнопка, с помощью которой можно открыть один конкретный блок. Я использую Bootstrap 4 alpha 6 версию. На данный момент при нажатии основной кнопки открывается все блоки. Проблема начинается когда например открываю скажем первый блок, а затем с помощью основной кнопки пытаюсь раскрыть остальные блоки. На деле же первый блок закрывается, а все остальные открываются. Как исправить такое странное поведение?

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"></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"></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"></a>
                <div class="collapse block" id="block-3">
                   <!--THIRD BLOCK-->
                </div>
            </div>

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

Javascript:

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

Answer 1

[Alik Send]

Для поведения "если хотя бы одна открыта, закрыть все"

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

Для поведения "если хотя бы одна закрыта, открыть все"

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

Честно говоря не тестировал, но если наличие класса "collapse" означает что элемент скрыт, должно работать.

Comments

[nurzhannogerbek]

Здравствуйте! Можете пожалуйста проверить данный код у себя? Потому что я попробовал и он работает не корректно. При нажатии на основную кнопку (expand-collapse) открывается и закрывается лишь первый блок. Остальные блоки не реагируют. Как можно объединить данные две части вашего кода в один?

[Alik Send]

Начал разбираться в вашем коде...
Во-первых у вас кнопки вверху были уже привязаны к открытию/закрытию, поведение в вашем комментарии из-за этого
Во-вторых в вашем коде идёт поиск по `button[data-toggle="collapse"]`, хотя везде дальше используются `a`
В-третьих ни у одной `a` не указан `data-target` который вы пытаетесь там взять
Накидал в JSBin, для перезапуска можно нажать "Run With JS" в панели Output

[nurzhannogerbek]

Alik Send: Спасибо большое за детальный ответ! Это как раз то, что искал долгое время.