Generic Accordion

components.accordion-item.js

// components/accordion-item.js

import Ember from 'ember';

export default Ember.Component.extend({
  item: null,
  activeItem: null,
  
  isExpanded: Ember.computed('activeItem', 'item', function() {
    return this.get('activeItem') === this.get('item');
  })
});

components.block-accordion.js

// components/block-accordion.js

import Ember from 'ember';

export default Ember.Component.extend({
  items: null,
  activeItem: null,
  actions: {
    toggleActiveItem(item) {
      if (this.get('activeItem') !== item) {
        this.set('activeItem', item);
      } else {
        this.set('activeItem', null);
      } 
    }
  }
});

components.contextual-accordion.js

// components/contextual-accordion.js

import Ember from 'ember';

export default Ember.Component.extend({
  items: null,
  activeItem: null,
  actions: {
    toggleActiveItem(item) {
      if (this.get('activeItem') !== item) {
        this.set('activeItem', item);
      } else {
        this.set('activeItem', null);
      } 
    }
  }
});

controllers.application.js

import Ember from 'ember';

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

controllers.block-accordion-demo.js

import Ember from 'ember';

export default Ember.Controller.extend({
  items: [
    {title: "Item 1", details: "Some details"},
    {title: "Item 2", details: "Some more details"},
    {title: "Item 3", details: "Yet other details"},
  ]
});

controllers.contextual-accordion-demo.js

import Ember from 'ember';

export default Ember.Controller.extend({
  blogPosts: [
    {
      title: "The whys and hows of services",
      author: "Chris",
      text: "Services, their whys, their hows."
    },
    {
      title: "12 things about the router.  Number 6 will shock you",
      text: "Routing and routes and such.",
      author: "Steve"
    },
    {
      title: "I used handlebars. You won't guess what happens next",
      text: "Templates and helpers and mustaches oh my.",
      author: "Larry"
    }
  ]
});

rails-form-builder.erb

<%= form_for @person do |f| %>
  <%= f.text_field :first_name %>
  <%= f.text_field :address %>
  <%= f.submit "Create" %>
<% end %>

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('blockAccordionDemo');
  this.route('contextualAccordionDemo');
});

export default Router;

styles.app.css

body {
  margin: 12px 16px;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
  font-size: 12pt;
}

.header {
  background: #eee;
  padding: 10px;
}

.details {
  padding: 10px 10px 20px 10px;
}

templates.application.hbs

<h1>Pick an Accordion</h1>
<br>
{{link-to 'Block Accordion' 'blockAccordionDemo'}}
{{link-to 'Contextual Accordion' 'contextualAccordionDemo'}}
{{outlet}}
<br>

templates.block-accordion-demo.hbs

{{#block-accordion items=items as |item isExpanded headerClicked|}}
<div class='header' {{action headerClicked}}>{{item.title}} (click to {{if isExpanded 'close' 'open'}})</div>
{{#if isExpanded}}
  <div class='details'>{{item.details}}</div>
{{/if}}
{{/block-accordion}}

templates.components.accordion-details.hbs

{{#if isExpanded}}
  <div class='details'>{{yield}}</div>
{{/if}}

templates.components.accordion-header.hbs

<div class='header'>
  {{yield}}
</div>

templates.components.accordion-item.hbs

{{yield isExpanded}}

templates.components.block-accordion.hbs

{{#each items as |listItem|}}
  {{#accordion-item item=listItem activeItem=activeItem as |isExpanded| }}
  {{yield listItem isExpanded (action 'toggleActiveItem' listItem)}}
  {{/accordion-item}}
{{/each}}

templates.components.contextual-accordion.hbs

{{#each items as |listItem|}}
  {{#accordion-item item=listItem activeItem=activeItem as |isExpanded| }}
  {{yield listItem
          (hash isExpanded=isExpanded
                header=(component 'accordion-header' click=(action 'toggleActiveItem' listItem))
                details=(component 'accordion-details' isExpanded=isExpanded))}}
  {{/accordion-item}}
{{/each}}

templates.contextual-accordion-demo.hbs

{{#contextual-accordion items=blogPosts as |item a|}}
  {{#a.header}}
    {{item.title}} (click to {{if a.isExpanded 'close' 'read'}})
  {{/a.header}}  
  
  {{#a.details}}
    <h4>By {{item.author}} </h4>
    <p>
      {{item.text}}
    </p>
  {{/a.details}}
{{/contextual-accordion}}

templates.hash-helper.hbs

<!-- parent-component.hbs -->
{{yield (hash a="foo" b="bar" c=(action 'baz'))}}

<!-- child-component.hbs -->
{{#parent-component as |p|}}
  <p> This is foo {{p.a}} </p>
  <p> This is bar {{p.b}} </p>
  <p {{action p.c}}> Clicking me calls the closure action</p>
{{/parent-component}}

templates.rails-form-builder.hbs

<!-- usage -->
{{#form-for model=user as |f|}}
  {{f.textField field="name"}}
  {{f.textField field="address"}}
  {{f.submit text="Create"}}
{{/form-for}}

<!-- components/form-for.hbs -->
<form>
  {{yield (hash textField=(component 'form-text-field' model=model)
                submit=(component 'form-submit' onSubmit=(action 'submitForm' model)}}
</form>

<!-- components/form-text-field.hbs -->
{{input value=(get model field)}}

<!-- components/form-submit.hbs -->
<button {{action onSubmit}}>{{text}}</button>

twiddle.json

{
  "version": "0.10.5",
  "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.8.0",
    "ember-data": "2.8.0",
    "ember-template-compiler": "2.8.0",
    "ember-testing": "2.8.0"
  },
  "addons": {}
}