Toggle ember-bootstrap accordion

Quang Nguyen
Sep 3, 2018 · 1 min read

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.

quangtn0018

Just my findings and techniques that I’ve learned from working and doing side projects on all things software engineering related

Quang Nguyen

Written by

Software Engineer

quangtn0018

Just my findings and techniques that I’ve learned from working and doing side projects on all things software engineering related

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade