bootstrap collapse add class for open item

2
votes

I have used bootstrap framework for display collapsible panels in my webpage. By default the first panel is open. I need to add class to the opened panel's head on page load. If i click any panel the class should be removed. How to do this?

1
jquerycsstwitter-bootstrap-3
Please show some code. Also, which version of bootstrap? - francisco.preller
can you share your relevant code? - om_deshpande
I have downloaded the framework from this site and please refer getbootstrap.com/javascript/#collapse for code - lifeline
Make sure you have properly link the javascript required. Make sure you have activate the collapsible using data attributes or javascript. Post your code so we can help - AzDesign
Here's a version with the Bootstrap resources loaded externally - jsfiddle.net/ehvDd/2 - Phil

1 Answers

2
votes

I think I know what you want. Try this

var panelHeadClass = 'foo',
    accordion = $('#accordion'),
    openPanel = accordion.find('.panel-collapse.collapse.in'),
    openPanelHead = openPanel.prev('.panel-heading').addClass(panelHeadClass);

accordion.on('click', '.panel', function() {
    openPanelHead.removeClass(panelHeadClass);
});

Demo here - http://jsfiddle.net/ehvDd/3/