How do I can get a clicked item to show/hide its hidden elements?

Question

I am having some trouble displaying a clicked items hidden elements.

Find below my clicked events code.

'click .stylishTiles'(event, instance) {
   event.preventDefault();
   var selectedTile = this._id;

   Session.set("selectedTile_id2", selectedTile);

   $("#hidden").show(300);
   $(".selected").addClass('show');
  },

'click .show'(event, instance) {
   event.preventDefault();

   $("#hidden").hide(300);
   $(".stylishTiles").removeClass('show');

} 

The Session.set("selectedTile_id2", selectedTile) in the clicked event is passed on to the helper via Session.get('selectedTile_id2').

Find below the aimed helper code:

'selectedTile': function () {

    var selectedTileId = this._id;
    var selectedTile_id2 = Session.get('selectedTile_id2');

    if(selectedTileId == selectedTile_id2){
        return "selected"
    }
} 

And find below the code for the targeted template:

<template name="invoicesV2C">

{{#each pendingInvoicesV2C}}

    <div class="well well-sm stylishTiles {{selectedTile}}">

        <div id ="invoiceAmount"> KES: {{formatCurrency recipientAmount}} </div>

        <div id="hidden"> tel: {{recipientNumber}} <br> purpose: {{invoicePurpose}} </div>  

    </div>                      

{{/each}}

</template>

The {{#each pendingInvoicesV2C}} in the template correctly generates several items, while correctly hiding their hidden elements by default due to the CSS code

#hidden{
display: none;
}

The much desired effect is that I when I click on any item, its hidden elements, being: <div id="hidden"> tel: {{recipientNumber}} <br> purpose: {{invoicePurpose}} </div> should show, hence

 $("#hidden").show(300);
 $(".selected").addClass('show');

And in reverse, whenever I click on an item already showing its elements,again being: <div id="hidden"> tel: {{recipientNumber}} <br> purpose: {{invoicePurpose}} </div> it should be hidden.

Currently, regardless of the item I click on, only the first element in the list of items will show/hide its elements.

Kindly help me understand how I can get a clicked element to show its hidden details?

Answer 1

You have numerous errors along with really twisted logic.

Let me help you to simplify that:

CSS: We're using class instead of id

.hidden {
  display: none;
}

Template:

<template name="invoicesV2C">
  {{#each pendingInvoicesV2C}}
    <div class="well well-sm stylishTiles">
      <div class="invoiceAmount">
        KES: {{formatCurrency recipientAmount}}
      </div>
      <div class="toggled hidden">
        tel: {{recipientNumber}}
        <br>
        purpose: {{invoicePurpose}}
      </div>  
    </div>                      
  {{/each}}
</template>

Template Code:

Template.invoicesV2C.events({
  'click .stylishTiles'(event) {
    event.preventDefault();
    const $e = $(event.target).closest('.stylishTiles');
    $e.find('.toggled').toggle(300);
  }
});

That's all. You don't even need helper and using Session at all.

Here is tiny fiddle, representing how it works: https://jsfiddle.net/iStyx/ff6hvorz/