sidebar toggle setup

components.desired.card-holder.js

import Ember from 'ember';

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

components.desired.nested-card.js

import Ember from 'ember';

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

components.desired.side-bar.js

import Ember from 'ember';
/*
export default Ember.Component.extend({
	items: [
    Ember.Object.create({ open: true, children: [
	    Ember.Object.create({ open: true, children: [
  	  	Ember.Object.create({ open: true }),
    	]}),
      Ember.Object.create({ open: true }),
    ]}),
    Ember.Object.create({ open: true }),
  ]
});


import Ember from 'ember';
*/

export default Ember.Component.extend({
	items: [
    Ember.Object.create({
      name: 'Dave',
      children: Ember.Object.create({
        open: true, 
      	items: [
	    		Ember.Object.create({
            name: 'Joe',
            children: Ember.Object.create({
              open: true,
							items: [
                Ember.Object.create({ name: 'Bill' }),
      				]
    				}),
          }),
      		Ember.Object.create({ name: 'George' }),
        ]
    	}),
    }),
    Ember.Object.create({ name: 'Harry' }),
  ],
  
  actions: {
    clicked(item) {
      item.toggleProperty('open');
    }    
  }
});

components.working.card-holder.js

import Ember from 'ember';

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

components.working.nested-card.js

import Ember from 'ember';

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

components.working.side-bar.js

import Ember from 'ember';

export default Ember.Component.extend({
	cardHolder1: true,
	cardHolder2: true,
	cardHolder3: true,
	cardHolder4: true,
  cardHolder5: true,
  
  actions: {
   	clicked(item) {
      this.toggleProperty(item);
    }
  }
});

controllers.application.js

import Ember from 'ember';

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

router.js

import Ember from 'ember';
import config from './config/environment';

const Router = Ember.Router.extend({
  location: 'none',
  rootURL: config.rootURL
});

Router.map(function() {
  this.route('desired', { path: '/' });
  this.route('working');
});

export default Router;

templates.application.hbs

<ul>
<li>{{#link-to 'desired'}}Desired{{/link-to}}</li>
<li>{{#link-to 'working'}}Working{{/link-to}}</li>
</ul>
{{outlet}}

templates.components.desired.card-holder.hbs

<div style="border: 1px solid red; padding: 1rem">
	{{desired/nested-card model=item}}
{{!yield item}}

{{#if item.children}}
<br>
Children:
{{#if item.children.open}}
	<button {{action clicked item.children}}>Shut</button>
  
    {{#each item.children.items as |child|}}
	  {{#desired/card-holder item=child clicked=(action clicked) as |childItem|}}
	    {{desired/nested-card model=childItem}}
{{!--
    	{{log 'yielding to a nested card'}}
      {{log childItem.name}}
    	{{yield childItem}}
--}}
    {{/desired/card-holder}}
  {{/each}}

{{else}}
	<button {{action clicked item.children}}>Open</button>
{{/if}}

{{/if}}
</div>

templates.components.desired.nested-card.hbs

<div style="border: 1px solid green; padding: 1rem;">
{{log 'held name'}}
{{log model.name}}
{{model.name}}
</div>

templates.components.desired.side-bar.hbs

{{#each items as |item|}}
	{{desired/card-holder item=item clicked=(action 'clicked')}}
{{!--  
  {{#desired/card-holder item=item clicked=(action 'clicked') as |heldItem|}}
  	{{log 'inside sidebar nested'}}
    {{log 'heldItem is'}}
    {{log heldItem.name}}
  	{{desired/nested-card model=heldItem}}
  {{/desired/card-holder}}
  --}}
{{/each}}

templates.components.working.card-holder.hbs

<div style="border: 1px solid red; padding: 1rem;">
{{#if open}}
	open
  {{working/nested-card clicked=(action clicked)}}
	{{yield}}
{{else}}
shut <button {{action clicked}}>open</button>
{{/if}}
</div>

templates.components.working.nested-card.hbs

<div style="border: 1px solid green; padding: 1rem;">
<button {{action clicked}}>Shut</button> working nested card
</div>

templates.components.working.side-bar.hbs

{{#working/card-holder open=cardHolder1 clicked=(action 'clicked' 'cardHolder1')}}
{{/working/card-holder}}

{{#working/card-holder open=cardHolder2 clicked=(action 'clicked' 'cardHolder2')}}
	{{#working/card-holder open=cardHolder3 clicked=(action 'clicked' 'cardHolder3')}}
  	{{working/card-holder open=cardHolder4 clicked=(action 'clicked' 'cardHolder4')}}
	{{/working/card-holder}}
  
  {{working/card-holder open=cardHolder5 clicked=(action 'clicked' 'cardHolder5')}}
{{/working/card-holder}}

templates.desired.hbs

<h2>Desired</h2>

{{desired/side-bar}}

templates.working.hbs

<h2>Working</h2>

{{working/side-bar}}

twiddle.json

{
  "version": "0.11.0",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.10.2",
    "ember-data": "2.11.0",
    "ember-template-compiler": "2.10.2",
    "ember-testing": "2.10.2"
  },
  "addons": {}
}