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}}
    	Panel Body 2
    {{/panel.body}}
  {{/accordion.panel}}
{{/cs-accordion}}

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(),

  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('accordion', function() {
    let accordions = this.get('accordion.accordions');
    let group = this.get('group');
		return accordions[group].panels.findBy('name', this.get('elementId'));  
  }),
  
  didInsertElement() {
    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": {
  }
}