I have a template with titles and details. How do I create a toggle view details when you click the title

@codevista wrote:

I have a template with titles and details. How do I create a toggle view for h3 to display the div with details when you click the title.

I need help or a little demo and some guidance so I can learn. I currently have an app on GitHub.

Here is my template code:

<h2>Titles</h2>
{{outlet}}

{{#each pagedContent as |post|}}
      <div class="listing">
/* Click*/
          <h3>{{post.title}}</h3>
/* Toggle view below*/
          <p>{{post.body}}</p>
          <p>User Name: {{post.userId.username}} </p>
          <p>Company: {{post.userId.company.name}}</p>
            {{!-- TODO: Fix format --}}
            <p><a href="{{post.userId.website}}"></a></p>
            <p>Catchphrase: {{post.userId.company.catchPhrase}}</p>

            <p>Author's Name: {{post.userId.name}} </p>
            {{!-- TODO: Fix format --}}
            <p><a href="mailto:{{post.userId.email}}"></a></p>
            <p>City: {{post.userId.address.city}} </p>
        </div>
{{/each}}

{{page-numbers content=pagedContent}}

Posts: 2

Participants: 2

Read full topic