Toggle ember-bootstrap accordion
Hey guys! I was working with the ember-boostrap accordion component and I thought I would share to you all how I created an open/close all functionality for the accordions in my web application.
// js
import Ember from 'ember';export default Ember.Component.extend({
toggleCollapsed: false,
actions: {
toggleAllAccordions() {
this.toggleProperty('toggleCollapsed')
}
}
});// html
<div class="accordion-container">
<button {{action 'toggleAllAccordions'}}>Toggle Menus</button><div>
{{#bs-accordion as |acc|}}
{{#acc.item value="1" as |aitem|}}
{{#aitem.title}}
title goes here
{{/aitem.title}}
{{#aitem.body collapsed=toggleCollapsed}}
body goes here
{{/aitem.body}}
{{/acc.item}}
{{#acc.item value="2" as |aitem|}}
{{#aitem.title}}
title goes here
{{/aitem.title}}
{{#aitem.body collapsed=toggleCollapsed}}
body goes here
{{/aitem.body}}
{{/acc.item}}
and more accItems can go here
{{/bs-accordion}}
</div>
</div>
So here, we have a component and its template. Nothing fancy. Lets take a deeper look at the template file. We just have a button that will call our toggleAllAccordions in order to trigger the open and close collapse of the accordions you will see on your web page. Then, you have the usage for rendering the ember-bootstrap accordions.
The most important thing to note here is that I separated the aitem.title and aitem.body of the bs-accordion because we want to give aitem.body a property called collapsed that will change based on our button. There documentation for this is here. Without doing this, you would have to give each of your accordion item the same value property but we might not want want that in all cases.

