切换Aurelia中仅最近元素的显示

Question

I could easily do this with vanilla JS or jQuery but wondering what the "correct" way to simply achieve the following is in Aurelia.

I have a ton of "cards" with toggle buttons to show that cards "hidden-info". With the way that I'm currently doing it, clicking any "expand-toggle" display all cards "hidden-info".

What is the right way to toggle only the nearest sibling with Aurelia?

Here's my example.html :

<div class="inner">
    <i class="expand-toggle" click.delegate="expandCard()"></i>
    <h3>Title</h3>
    <div if.bind="cardExpanded" class="au-animate hidden-info">
    </div>
</div>

And my example.js :

export class Example {
    constructor() {
        this.cardExpanded = false;
    }

    expandCard() {
        this.cardExpanded = true;
    }
}

Also, how would I then hide it on the next click. This is basic but I am new to Aurelia. Thanks!

Answer 1

I would try

example.html:

<div class="inner">
    <i class="expand-toggle" click.delegate="expandCard(this)"></i>
    <h3>Title</h3>
    <div if.bind="cardExpanded" class="au-animate hidden-info">
    </div>
</div>

example.js:

export class Example {
    constructor() {
        this.cardExpanded = false;
    }

    expandCard(sender) {
        sender.cardExpanded = !sender.cardExpanded;
    }
}