CODEWITHSUNDEEP
javascripttwitter-bootstrapaccordion
cnom
cnom

Reputation: 3241

Bootstrap Collapsible Group that can work as Accordion or not

I use the Accordion example from here and I try to make it to expand multiple or single Panel, as selected by user, by adding 2 buttons, which, using jquery, remove the Attribute 'data-parent' or add it again.

This is my implementation here

All the work is done like that:

$('#expandSingle').on('click', function () { 
  $('.accordion-toggle').attr('data-parent', '#accordion');
});

$('#expandMulti').on('click', function () { 
  $('.accordion-toggle').removeAttr('data-parent'); 
});

The weird thing is that, if I manually (no jquery), remove the 'data-parent' and refresh, I get the result I want, the Panels become all Collapsible. When I do it via jquery on-page, it has strange behavior, but does not work...

Any ideas Please?

Upvotes: 0

Views: 76

Answers (2)

cnom
cnom

Reputation: 3241

Based on Skelly's answer, I improved it a bit like that:

$('#expandSingle').on('click', function () { 
  $('.panel-collapse').removeData('bs.collapse');
  $('.panel-collapse').collapse({parent:'#accordion', toggle:false});
});

$('#expandMulti').on('click', function () { 
  $('.panel-collapse').removeData('bs.collapse');
  $('.panel-collapse').collapse({parent:false, toggle:false});
});

I just added the toggle:false option on collapse(), so I got rid of this annoying toggling when switching from Single to Multi.

Demo: http://www.bootply.com/8EZ1WjgxSX

Upvotes: 0

Carol Skelly
Carol Skelly

Reputation: 362290

It's not working because the collapse component has already been initialized with the #accordion as the data-parent.

You can re-init the component and reset the data attribute like this..

$('#expandSingle').on('click', function () { 
  $('.panel-collapse').removeData('bs.collapse');
  $('.panel-collapse').collapse({parent:'#accordion'});
});

$('#expandMulti').on('click', function () { 
  $('.panel-collapse').removeData('bs.collapse');
  $('.panel-collapse').collapse({parent:false});
});

Demo: http://bootply.com/dSZVY2hphO

Upvotes: 1

Related Questions