Développer/Réduire plusieurs blocs en même temps?

Question

J'ai plusieurs blocs dans ma page. J'utilise bootstrap 4 alpha 6 version. Je veux développer/réduire ces blocs en cliquant sur un bouton. Droit sais que j'utilise le code js suivant et il ouvre seulement tous les blocs mais comment les fermer ?! Comment régler ce problème?

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

Ajouter une instruction else pour traiter tous les autres cas qui ne correspondent pas aux critères de montrer. Essayez ceci:

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

Answer 2

Il y a une erreur avec la version v4.0.0-alpha.6 Bootstrap avec la transition qui sera résolu sur la prochaine version.

Voir le numéro 22256 et tirez 21743 liens pour plus d'informations.

Answer 3

Le code qui youve utilisé fonctionnera comme prévu dans bootstrap3 en raison de l'effondrement de manière a été traitée alors (vous pouvez le vérifier en utilisant JS & CSS V3 bootstrap)

Comming pour résoudre votre problème l'extrait suivant serait travail comme prévu:

$(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:

Nous pouvons également passer toggle argument à la fonction collapse et se débarrasser de l'if-else état

$(this).collapse('toggle'); peut être utilisé pour remplacer le if-else

Mais je n'y suis pas dans mon exemple pour montrer que vous pouvez ajouter le calcul supplémentaire dans ce

travail Fiddle

MISE à jOUR: la question mise à jour demande un contrôle individuel pour le bloc

Pour ce faire, nous pouvons utiliser la méthode par défaut de déclenchement de l'action avec un élément de bouton.

 <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> 

Vous trouverez les jsFidde mis à jour ici