Skip welcome & menu and move to editor
Welcome to JS Bin
Load cached copy from
 
<script src="http://code.jquery.com/jquery.min.js"></script>
<link href="http://getbootstrap.com/dist/css/bootstrap.css" rel="stylesheet" type="text/css" />
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script><script src="http://code.jquery.com/jquery-git2.js"></script><div class="itemsContainer">
    
<div class="ic">            
<div class="item">
    <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" href="#collapse-34712e98-7720-41f6-8b91-c8241eb994eb">
            <div class="heading">
                First
            </div>
            <span class="icon"><span class="caret-big caret-down"></span></span>
        </div>
        <div id="collapse-34712e98-7720-41f6-8b91-c8241eb994eb" class="panel-collapse collapse">
            <div class="panel-body alternative">
                <div class="info">
                    <div class="name">
                        aa
                    </div>
                    <div class="value">
                        First
                    </div>
                </div>
                <div class="info">
                    <div class="name">
                        aa
                    </div>
                    <div class="value">
                        First
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
        
            
<div class="item2">
    <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" href="#collapse-01c6530e-007e-4553-98a7-e7bd0273d3cf">
            <div class="heading">
                Second
            </div>
            <span class="icon"><span class="caret-big caret-down"></span></span>
        </div>
        <div id="collapse-01c6530e-007e-4553-98a7-e7bd0273d3cf" class="panel-collapse collapse">
            <div class="panel-body alternative">
                <div class="info">
                    <div class="name">
                        aa
                    </div>
                    <div class="value">
                        Second
                    </div>
                </div>
                <div class="info">
                    <div class="name">
                        aa
                    </div>
                    <div class="value">
                        Second
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
        
            
<div class="item">
    <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" href="#collapse-a59f9282-2bf6-4b83-8eac-8cfa0933dcd1">
            <div class="heading">
                Third
            </div>
            <span class="icon"><span class="caret-big caret-down"></span></span>
        </div>
        <div id="collapse-a59f9282-2bf6-4b83-8eac-8cfa0933dcd1" class="panel-collapse collapse">
            <div class="panel-body alternative">
                <div class="info">
                    <div class="name">
                        aa
                    </div>
                    <div class="value">
                        Third
                    </div>
                </div>
                <div class="info">
                    <div class="name">
                        aa
                    </div>
                    <div class="value">
                        Third
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
  
  <div class="item2">
    <div class="panel panel-default">
        <div class="panel-heading" data-toggle="collapse" href="#collapse-01c6530e-007e-4553-98a7-e7bd0273d3cf">
            <div class="heading">
                Second
            </div>
            <span class="icon"><span class="caret-big caret-down"></span></span>
        </div>
        <div id="collapse-01c6530e-007e-4553-98a7-e7bd0273d3cf" class="panel-collapse collapse">
            <div class="panel-body alternative">
                <div class="info">
                    <div class="name">
                        aa
                    </div>
                    <div class="value">
                        Second
                    </div>
                </div>
                <div class="info">
                    <div class="name">
                        aa
                    </div>
                    <div class="value">
                        Second
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
        
</div>
</div>
 
$(".panel-heading").click(function (event) {
                var caret = $(event.target).parent().parent();
                caret = caret.find(".icon .caret-big");
                if (caret.hasClass('caret-up')) {
                    caret.removeClass('caret-up');
                    caret.addClass('caret-down');
                }
                else {
                    caret.removeClass('caret-down');
                    caret.addClass('caret-up');
                }
            });
Output

This bin was created anonymously and its free preview time has expired (learn why). — Get a free unrestricted account

Dismiss x
public
Bin info
tbitowtpro
0viewers