CODEWITHSUNDEEP
javascriptjquerytwitter-bootstrap-3
user2713512
user2713512

Reputation: 271

Bootstrap toggle chevron

I am using bootstrap 3 and I have some collapsible panels which act as filters on a results page. So it isnt really an accordion menu as more than one can be open at any given time. Plus some will be open upon page load (using class in). So I need some javascript that will toggle the chevron depending on the state of the panel (opened or closed).

Here is the mark up:

                <!-- Filter options -->
            <div id="accordion">
                <div class="panel-header">
                    <h5><a data-toggle="collapse" data-parent="#accordion" href="#collapseOne">Subject<span class="glyphicon glyphicon-chevron-down pull-right"></span></a></h5>
                    <div id="collapseOne" class="panel-collapse collapse in">
                        <ul class="list-unstyled">
                            <li class="selected"><a href="#"><span class="uxf-icon uxf-close-square"></span></a>Foreign Relations (15676) </li>
                            <li><a href="#">Vietnam War (13013)</a> </li>
                            <li><a href="#">Government Documents (10479)</a> </li>
                            <li class="selected"><a href="#"><span class="uxf-icon uxf-close-square"></span></a>Military Assistance</li>
                            <li><a href="#">More...</a></li>
                        </ul>   
                    </div> 
                </div>
                <div class="panel-header">
                    <h5><a data-toggle="collapse" data-parent="#accordion" href="#collapseTwo">Geography<span class="glyphicon glyphicon-chevron-down pull-right"></span></a></h5>
                    <div id="collapseTwo" class="panel-collapse collapse">  
                        <ul class="list-unstyled">
                            <li><a href="#">Foreign Relations (15676)</a> </li>
                            <li><a href="#">Vietnam War (13013)</a> </li>
                            <li><a href="#">Government Documents (10479)</a> </li>
                            <li><a href="#">Military Assistance </a>
                            </li><li><a href="#">More...</a></li>
                        </ul>    
                    </div>
                </div>
                <div class="panel-header">
                    <h5><a data-toggle="collapse" data-parent="#accordion" href="#collapseThree">Person As Subject<span class="glyphicon glyphicon-chevron-down pull-right"></span></a></h5>
                    <div id="collapseThree" class="panel-collapse collapse">    
                        <ul class="list-unstyled">
                            <li><a href="#">Foreign Relations (15676)</a> </li>
                            <li><a href="#">Vietnam War (13013)</a> </li>
                            <li><a href="#">Government Documents (10479)</a> </li>
                            <li><a href="#">Military Assistance </a>
                            </li><li><a href="#">More...</a></li>
                        </ul>  
                    </div>   
                </div>     
            </div>

Obviously at the minute all of the panels have the chevron down icon. Many thanks

Upvotes: 0

Views: 3978

Answers (1)

Cobote
Cobote

Reputation: 395

Check the open/closed status of each div by looking for the in class. Once set you can swap the chevron classes within a click event.

// onload
$('a[data-toggle=collapse]').each(function() { 
    var chevron = $(this).parent().next('div');
    if ( chevron.hasClass('in') ) {
        $(this).children('span').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
    } else {
        $(this).children('span').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
    }
});

// click event
$('a[data-toggle=collapse]').click( function() {  
    // swap chevron
    $(this).children('span').toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
});

Bootply

Upvotes: 2

Related Questions