How Can I Elegantly Display Bootstrap 3 Collapse State Using Chevron Icons and Core Events?

Chevron Icon Indicator for Bootstrap 3 Collapse State

Utilizing the core example provided in the Bootstrap 3 Javascript documentation for Collapse, it's possible to display the expanded or collapsed state of an element using chevron icons. The existing implementation achieves this using the following event handler:

$('#accordion .accordion-toggle').click(function (e) {
    var chevState = $(e.target).siblings("i.indicator").toggleClass('glyphicon-chevron-down glyphicon-chevron-up');
    $("i.indicator").not(chevState).removeClass("glyphicon-chevron-down").addClass("glyphicon-chevron-up");
});

While this approach works, there may be a more elegant solution to this challenge. Specifically, you'd like to leverage the core function, $('#accordion').on('hidden.bs.collapse', ...) to achieve the desired effect.

For the HTML provided in the Bootstrap 3 examples:

<div class="panel-group">

Consider the following CSS to indicate the collapse state using chevron icons:

.panel-heading .accordion-toggle:after {
    /* symbol for "opening" panels */
    font-family: 'Glyphicons Halflings';  /* essential for enabling glyphicon */
    content: "\e114";    /* adjust as needed, taken from bootstrap.css */
    float: right;        /* adjust as needed */
    color: grey;         /* adjust as needed */
}
.panel-heading .accordion-toggle.collapsed:after {
    /* symbol for "collapsed" panels */
    content: "\e080";    /* adjust as needed, taken from bootstrap.css */
}

With these styles in place, you can now use the hidden.bs.collapse event to dynamically update the chevron icon based on the collapse state:

$('#accordion').on('hidden.bs.collapse', function () {
    $('.accordion-toggle').removeClass('glyphicon-chevron-up').addClass('glyphicon-chevron-down');
});

$('#accordion').on('shown.bs.collapse', function () {
    $('.accordion-toggle').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-up');
});

This approach leverages the core events provided by Bootstrap 3 to handle the collapse state changes, while maintaining a clean and concise code structure.

The above is the detailed content of How Can I Elegantly Display Bootstrap 3 Collapse State Using Chevron Icons and Core Events?. For more information, please follow other related articles on the PHP Chinese website!