cs-accordion

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  accordion: Ember.inject.service(),
  actions: {
  	expandAll() {
      let accordion = this.get('accordion');
      console.log('accordion', accordion);
      console.log('expand all');
      accordion.expandAll('my-accordion')
    },
  },
});

application.template.hbs

<h1>Welcome to {{appName}}</h1>

<button onClick={{action 'expandAll'}}>Expand all</button>

{{#cs-accordion 
	name='my-accordion' 
  as |accordion|
}}
	{{#accordion.panel as |panel|}}
  	{{#panel.head}}
    	<h3>Panel head 1</h3>
  	{{/panel.head}}
    {{#panel.body}}
    	Panel Body 1
    {{/panel.body}}
  {{/accordion.panel}}
  
  {{#accordion.panel as |panel|}}
  	{{#panel.head}}
    	<h3>Panel head 2</h3>
  	{{/panel.head}}
    {{#panel.body}}
      {{#accordion.panel as |panel|}}
        {{#panel.head}}
          <h3>Panel head 2.1</h3>
        {{/panel.head}}
        {{#panel.body}}
          Panel Body 2.1
        {{/panel.body}}
      {{/accordion.panel}}
    {{/panel.body}}
  {{/accordion.panel}}
{{/cs-accordion}}

<hr>
{{#cs-accordion 
  name='my-accordion' 
  as |accordion|
}}
  {{#accordion.panel as |panel|}}
    {{#panel.head}}
      <h3>Panel head 1</h3>
    {{/panel.head}}
    {{#panel.body}}
      Panel Body 1
    {{/panel.body}}
  {{/accordion.panel}}
  
  {{#accordion.panel as |panel|}}
    {{#panel.head}}
      <h3>Panel head 2</h3>
    {{/panel.head}}
    {{#panel.body}}
      {{#cs-accordion 
        name='my-accordion' 
        as |nested|
      }}
        {{#nested.panel as |panel|}}
          {{#panel.head}}
            <h3>Panel head 2.1</h3>
          {{/panel.head}}
          {{#panel.body}}
            Panel Body 2.1
          {{/panel.body}}
        {{/nested.panel}}
      {{/cs-accordion}} 
    {{/panel.body}}
  {{/accordion.panel}}
{{/cs-accordion}}

<hr>

{{#cs-accordion-panel group="bob" as |panel|}}
  {{#panel.head}}
    <h3>Panel head 1</h3>
  {{/panel.head}}
  {{#panel.body}}
    Panel Body 1
  {{/panel.body}}
{{/cs-accordion-panel}}

{{#cs-accordion-panel group="bob" as |panel|}}
  {{#panel.head}}
    <h3>Panel head 2</h3>
  {{/panel.head}}
  {{#panel.body}}
    {{#cs-accordion-panel group="bob" as |panel|}}
      {{#panel.head}}
        <h3>Panel head 2.1</h3>
      {{/panel.head}}
      {{#panel.body}}
        Panel Body 2.1
      {{/panel.body}}
    {{/cs-accordion-panel}}
  {{/panel.body}}
{{/cs-accordion-panel}}

cs-accordion-panel-body.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

cs-accordion-panel-body.template.hbs

{{#if isExpanded}}
	{{yield}}
{{/if}}

cs-accordion-panel-head.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

cs-accordion-panel-head.template.hbs

{{yield}}

cs-accordion-panel.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  accordion: Ember.inject.service(),
  
  isExpanded: Ember.computed.readOnly('panelConfig.isExpanded'),

  actions: {
    toggleBody() {
			let panelConfig = this.get('panelConfig');
      console.log('panelConfig', panelConfig);
      this.toggleProperty('panelConfig.isExpanded');
      console.log('accordions', this.get('accordion.accordions'));
    },
  },
  
  panelConfig: Ember.computed(function() {
    let accordions = this.get('accordion.accordions');
    let group = this.get('group');
    let accordion = accordions[group];
		return accordion.panels.findBy('name', this.get('elementId'));  
  }),
  
  init() {
    this._super(...arguments);
    
    let accordions = this.get('accordion.accordions');
    let group = this.get('group');

    if (!accordions[group]) {
    	accordions[group] = {};
    }
    
    if (!accordions[group].panels) {
    	accordions[group].panels = [];
    }
    
    let panelConfig = {
    	name: this.get('elementId'),
      isExpanded: false,
    };
    
    accordions[group].panels.push(panelConfig);
  },
});

cs-accordion-panel.template.hbs

{{yield (hash
	head=(component 'cs-accordion-panel-head' 
  	click=(action 'toggleBody')
  )
	body=(component 'cs-accordion-panel-body' isExpanded=isExpanded)
)}}

cs-accordion.component.js

import Ember from 'ember';

export default Ember.Component.extend({
});

cs-accordion.template.hbs

{{yield (hash
	panel=(component 'cs-accordion-panel' group=name)
)}}

services.accordion.js

import Ember from 'ember';

export default Ember.Service.extend({
  expandAll(name) {
    let accordions = this.get('accordions');
    console.log('accordions', accordions);
  },
  accordions: {},
});

/*
let accordions = {
  'my-accordion': {
    panels: [
      {
        name: 'panel-xyz',
        isExpanded: false,
      },
      {
        name: 'panel-ijk',
        isExpanded: false,
      },
    ],
  },
  'my-other-accordion': {
  	...
  },
}
*/

twiddle.json

{
  "version": "0.14.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": true,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js",
    "ember": "2.18.2",
    "ember-template-compiler": "2.18.2",
    "ember-testing": "2.18.2"
  },
  "addons": {
  }
}