Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
​
<div class="card">
   <div class="card-header">
      <button id='expand-collapse-1' class='btn btn-secondary' type="button">
        Togg all v1
      </button>
      <button id='expand-collapse-2' class='btn btn-secondary' type="button">
        Togg all v2
      </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">Togg 1</a>
                <div class="collapse block show" id="block-1">
                   <div>
                      FIRST BLOCK
                   </div>
                </div>
             </div>
​
             <div class="list-group-item">
                <a data-toggle="collapse" href="#block-2" aria-expanded="false" aria-controls="block-2">Togg 2</a>
                <div class="collapse block" id="block-2">
                   <div>
                      SECOND BLOCK
                   </div>
                </div>
            </div>
​
            <div class="list-group-item">
                <a data-toggle="collapse" href="#block-3" aria-expanded="false" aria-controls="block-3">Togg 3</a>
                <div class="collapse block" id="block-3">
                   <div>
                      THIRD BLOCK
                   </div>
                </div>
            </div>
​
         </div>
      </div>
   </div>
</div>
​
 
​
 
$(function () {
    $('#expand-collapse-1').on('click',function(){
        var allCollapsed = true;
        $('#blocks .collapse').each(function(i, block){
          if($(block).hasClass('show')) {
            allCollapsed = false;
          }
        });
        $('#blocks .collapse').each(function(i, block){
            if (allCollapsed) {
                $(block).collapse('show');
            } else {
                $(block).collapse('hide');
            }
        });
    });
});
​
$(function () {
    $('#expand-collapse-2').on('click',function(){
        var allExpanded = true;
        $('#blocks .collapse').each(function(i, block){
          if(!$(block).hasClass('show')) {
            allExpanded = false;
          }
        });
        console.log('allExpanded', allExpanded);
        $('#blocks .collapse').each(function(i, block){
            if (allExpanded) {
                $(block).collapse('hide');
            } else {
                $(block).collapse('show');
            }
        });
    });
});
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers