How to create dynamic accordion component ember.js?

1

$ ember generate component dynamic-accordion

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14

<div class="accordion">
  {{#each items as |item index|}}
    <div class="accordion-item">
      <div class="accordion-header" {{action "toggleAccordion" index}}>
        {{item.title}}
      </div>
      {{#if item.isExpanded}}
        <div class="accordion-content">
          {{item.content}}
        </div>
      {{/if}}
    </div>
  {{/each}}
</div>

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

import Component from '@ember/component';

export default Component.extend({
  items: null,

  actions: {
    toggleAccordion(index) {
      this.items.forEach((item, i) => {
        if (i === index) {
          item.isExpanded = !item.isExpanded;
        } else {
          item.isExpanded = false;
        }
      });
    }
  }
});

1

{{dynamic-accordion items=model.accordionItems}}

1
2
3
4
5
6
7

export default Controller.extend({
  accordionItems: [
    { title: 'Accordion Item 1', content: 'Lorem ipsum dolor sit amet.', isExpanded: false },
    { title: 'Accordion Item 2', content: 'Consectetur adipiscing elit.', isExpanded: false },
    { title: 'Accordion Item 3', content: 'Sed do eiusmod tempor incididunt ut labore et dolore.', isExpanded: false }
  ]
});