Home >Web Front-end >CSS Tutorial >How Can I Elegantly Display Bootstrap 3 Collapse State Using Chevron Icons and Core Events?

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

Patricia Arquette
Patricia ArquetteOriginal
2024-11-29 18:39:14540browse

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!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn