Bootstrap - Collapse all accordions and show clicked

Question

I have a question regarding the accordions used in bootstrap.

On my page there are multiple accordions using different IDs as different content is loaded into each one through Kendo.

What I want to be able to do is collapse all accordions when clicking on a link that opens one accordion...

I guess an example would be

#accordion1 //is expanded
#accordion2 //is expanded
#accordion3 //is expanded
#accordion4 //is collapsed

link clicked expands accordion4

\#accordion1 //is expanded
\#accordion2 //is expanded
\#accordion3 //is expanded
\#accordion4 //is expanded

but what I want is accordion1, accordion2 and accordion3 to collapse and accordion4 to expand

Is this possible with bootstrap or would I have to create some custom code in Kendo or jQuery?

Answer 1

It's possible with bootstrap, using data-attribute:

 <a data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">

Here a working example.