{{#if data.help}}
  <div class="f-item-notes">
    <strong>Help</strong>
    {{t data.help}}
  </div>
{{/if}}

<div class="f-item-preview">
  <div class="codeExample">
    <div class="exampleOutput">
      <strong>Example</strong>
      {{{material @key @root}}}

      <button type="button" class="show-code" data-toggle="collapse" data-target="#{{data.codeblock}}" aria-expanded="true">&lt;/&gt;</button>
    </div>

    <div class="f-item-code f-item-hidden">
      <div class="codeBlock collapse" id="{{data.codeblock}}">
        <strong>Code</strong>
        <pre><code class="language-markup">{{material @key @root}}</code></pre>
      </div>
    </div>
  </div>
</div>

{{#if data.javascript}}
  <div class="f-item-javascript">
    <div class="codeBlock jsExample">
      <strong>Javascript</strong>
      <pre><code class="language-javascript">{{data.javascript}}</code></pre>
    </div>
  </div>
{{/if}}

{{#if data.help}}
  <div class="f-item-notes">
    <strong>Help</strong>
    {{t data.help}}
  </div>
{{/if}}

<div class="f-item-preview">
  <div class="codeExample">
    <div class="exampleOutput">
      <strong>Example</strong>
      {{{material @key @root}}}

      <button type="button" class="show-code" data-toggle="collapse" data-target="#code-{{@key}}" aria-expanded="true">&lt;/&gt;</button>
    </div>

    <div class="f-item-code f-item-hidden">
      <div class="codeBlock collapse" id="code-{{@key}}">
        <strong>Code</strong>
        <pre><code class="language-markup">{{material @key @root}}</code></pre>
      </div>
    </div>
  </div>
</div>

{{#if data.javascript}}
  <div class="f-item-javascript">
    <div class="codeBlock jsExample">
      <strong>Javascript</strong>
      <pre><code class="language-javascript">{{data.javascript}}</code></pre>
    </div>
  </div>
{{/if}}

Refactor data attributes for toggle animation
Refactor data attributes for toggle animation
