Show and hide in LWC

Question

There 3 records fetch by query and since I using iterator It shows 3 buttons as well whenever I click any show button it expands all 3 records I just wanted to expand only that record which button I clicked How should I do that?

<template>
<div class="lightningcard">
<lightning-card>
<template if:true={Announcements.data}>
<template for:each={Announcements.data} for:item="Announcement__c">  
    <p key={Announcement__c.Id} class="description"><b>{HSOP_Announcement__c.Name}</b></br></p>
        <template if:true={boolVisible}>
        <span class={showMoreClass} key={Announcement__c.Id}>{Announcement__c.AnnouncementDescription__c}</span>
</template>
<lightning-button  key={Announcement__c.Id} variant="brand" label={clickedButtonLabel} title="...more" onclick={handleClick} class="slds-m-left_x-small"></lightning-button>
</template> 
</template>
</lightning-card>
</div>
</template>

JavaScript

@wire(announcementlist) 
Announcements;

@track clickedButtonLabel = 'Show';  
@track boolVisible = false;  

handleClick(event) {  
const label = event.target.label;  
const annoucement = this.template.querySelector('p').key;
if ( label === 'Show' ) {  

    this.clickedButtonLabel = 'Hide';  
    this.boolVisible = true;  

} else if  ( label === 'Hide' ) {  
        
    this.clickedButtonLabel = 'Show';  
    this.boolVisible = false;  

}

Answer 1

The problem is you are using same property to show and hide for all the item inside the iterator. boolVisible is common for all the item. If it is true, it will show for all and if it is false, it hide for all.

                <template if:true={boolVisible}>
                    <span class={showMoreClass} key={Announcement__c.Id}>
                        {Announcement__c.AnnouncementDescription__c}
                    </span>
                </template>

To make it right, You need to make use of unique flag for each item in the list. The best way to achieve it is modify the JSON object structure of the {Announcements.data} within your JavaScript code. For example, you can add a boolean flag to each value with name isVisible. Then you need to make it true/false inside the button click method defined in javaScript side dynamically.

               <template if:true={Announcement__c.isVisible}>
                    <span class={showMoreClass} key={Announcement__c.Id}>
                        {Announcement__c.AnnouncementDescription__c}
                    </span>
                </template>

Answer 2

It is not the prettiest way but below I have provided a example with comments for details

JS

import { LightningElement, track } from 'lwc';
export default class App extends LightningElement {
    //this is just dummy data
    Announcements = {
        data: [
            {
                Id: 1,
                AnnouncementDescription__c: 'test1'
            },
            {
                Id: 2,
                AnnouncementDescription__c: 'test2'
            },
            {
                Id: 3,
                AnnouncementDescription__c: 'test3'
            }
        ]
    }
    @track clickedButtonLabel = 'Show';
    handleClick(event) {  
        const label = event.target.label;
        //get the id
        const id = event.currentTarget.id  
        //finds the text field
        const annoucement = this.template.querySelector('span[id="' + id + '"]');
        //finds the button
        let button = this.template.querySelector('lightning-button[id="' + id + '"]') 
        //sets the description field to diaplay
        annoucement.style.display = ''
        if ( label === 'Show' ) {  
            //sets the button label to hide
            button.label = 'Hide'

        } else if  ( label === 'Hide' ) {  
            //sets the button label to show
            button.label = 'Show';
            //sets the decription field to hidden   
            annoucement.style.display = 'none'
        }
    }
}

HTML

<template>
    <div class="lightningcard">
        <lightning-card>
            <template if:true={Announcements.data}>
                <template for:each={Announcements.data} for:item="Announcement__c">  
                    <!-- sets the style to none and the id to the value of  Announcement__c.Id-->
                    <span class={showMoreClass} key={Announcement__c.Id} style="display: none" id={Announcement__c.Id}>{Announcement__c.AnnouncementDescription__c}</span>
                    <!-- sets the id to the value of  Announcement__c.Id-->
                    <lightning-button  key={Announcement__c.Id} variant="brand" label={clickedButtonLabel} title="...more" onclick={handleClick} class="slds-m-left_x-small" id={Announcement__c.Id}></lightning-button>
                </template> 
            </template>
        </lightning-card>
    </div>
</template>