Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How add "active" class to open Bootstrap 3 accordion item?

How can I add "active" class to open Bootstrap 3 accordion item? In my example id adds "active" but does't remove from other elements. I'm using Bootstrap 3

<div class="panel-group accordions" id="accordion1">
    <div class="panel panel-custom">
        <div class="panel-heading">
            <h4 class="panel-title">
                <a data-toggle="collapse" data-parent="#accordion" href="#collapse1">
                    Collapsible Group Item #1
                </a>
            </h4>
        </div>
        <div id="collapse1" class="panel-collapse collapse in">
            <div class="panel-body">
                ....
            </div>
        </div>
    </div>
    ... 
</div>


 jQuery('.accordions .panel-heading a[data-toggle="collapse"]').on('click', function () {   
    $('.accordions').find(jQuery('.panel-heading a[data-toggle="collapse"]')).removeClass('actives');
    $(this).addClass('actives');
 });
like image 548
user3214264 Avatar asked Jan 20 '14 08:01

user3214264


People also ask

How do I keep my bootstrap accordion open by default?

If you'd like it to default open, add the additional class show . To add accordion-like group management to a collapsible area, add the data attribute data-parent="#selector" . Refer to the demo to see this in action.

How do I set my accordion to open by default?

Go to the Accordion module settings to the Advanced tab and open the CSS ID & Classes toggle and place the custom class “pa-accordion” into the CSS Class input field.

How do you close one accordion when another opens?

How do you close one accordion when another opens? open accordian > at right side go to accordian seting > scrol down to Expand/Collapse Accordion Option On Page Load > choose Hide/close All Accordion..

How does accordion work bootstrap?

Accordion Item #1It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.


1 Answers

Remove jQuery from this line of code:

$('.accordions').find(jQuery('.panel-heading a[data-toggle="collapse"]')).removeClass('actives');

Use like this:

$('.accordions').find('.panel-heading a[data-toggle="collapse"]').removeClass('actives');

You can also do like this:

jQuery('.accordions .panel-heading a[data-toggle="collapse"]').on('click', function () {   
    jQuery('.accordions .panel-heading a[data-toggle="collapse"]').removeClass('actives');
    $(this).addClass('actives');
 });
like image 178
Bhojendra Rauniyar Avatar answered Oct 02 '22 07:10

Bhojendra Rauniyar