JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://github.com/downloads/emberjs/ember.js/ember-0.9.6.js"></script>
<script type="text/x-handlebars" id="MyView">
    <span {{action "clickMeToToggleDetail"}}>{{someClickableHeader}}</span>
    {{#if isDetailViewable}}
        <div>{{someAdditionalDetail}}</div>
    {{/if}}
</script>

<script type="text/x-handlebars">
    {{view App.MyView}}
</script>

JavaScript

App = Em.Application.create({});

App.MyView = Em.View.extend({
    templateName: 'MyView',
    isDetailViewable: false,
    someClickableHeader: 'Header (Click me for more detail)',
    someAdditionalDetail: 'Some useless information...',
    clickMeToToggleDetail: function() {
        this.set('isDetailViewable', !this.get('isDetailViewable'));
    }
});