Toggle-List

application.controller.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName:'Ember Twiddle'
});

application.route.js

import Ember from 'ember';

export default Ember.Route.extend({
  model() {
  	let items = [
      { title: "First", details: "This is the first item!"},
      {title: "Second", details: "This is the second item!"}
    ]
    
    return items;
  }
});

application.template.hbs

{{#my-list items=model as |item|}}
	{{my-list-item item=item}}
{{/my-list}}
<br>
<br>

my-list-item.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  	itemIsExpanded: true,

	listIsExpandedDidChange: Ember.observer('listIsExpanded', function () {
		 this.set('itemIsExpanded', this.get('listIsExpanded'));
	}),


	actions: {
		toggleItemIsExpanded() {
			this.toggleProperty('itemIsExpanded');
		}
	}

});

my-list-item.template.hbs

<li>
	<h5>{{item.title}} Item</h5> <button {{action 'toggleItemIsExpanded'}}>
		Toggle {{item.title}} Item
	</button>

		<p>List is expanded = {{listIsExpanded}}</p>
		<p>Item is expanded = {{itemIsExpanded}}</p>
		
		{{#if itemIsExpanded}}
			<p style="color:red">{{item.details}}</p>
		{{/if}}

</li>

my-list.component.js

import Ember from 'ember';

export default Ember.Component.extend({
  listIsExpanded: true,

	actions: {
		toggleListIsExpanded() {
			this.toggleProperty('listIsExpanded');
		}
	}
});

my-list.template.hbs

<h3>This is my List!</h3>
<button {{action 'toggleListIsExpanded'}}>Toggle List</button>

<ul>
	{{#each items as |item|}}
		{{my-list-item item=item listIsExpanded=listIsExpanded}}
	{{/each}}
</ul>

twiddle.json

{
  "version": "0.4.9",
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember.js",
    "ember-data": "https://cdnjs.cloudflare.com/ajax/libs/ember-data.js/1.13.11/ember-data.js",
    "ember-template-compiler": "https://cdnjs.cloudflare.com/ajax/libs/ember.js/1.13.9/ember-template-compiler.js"
  }
}