How to hide and show specific record details when multiple records are displayed based on click in Lightning Web component - Salesforce Globe for You

How to hide and show specific record details when multiple records are displayed based on click in Lightning Web component  -  Salesforce Globe for You

Problem: Assume a list of Lead records are displayed using LWC Component.Initially  on load only 1 field of each record will be visible.If your want to see more fields,he can click 'Show More' to view more data and then he can click 'View Less' to hide the details.

Solution: In the list of records itself,introduce one boolean field to handle the hide and show details.When user clicks on specific record,change that record related boolean flag to toggle as done in the example below

Example:

Apex class:

public class LeadController {

    @AuraEnabled

    public static List<LeadData> getLeads() {

        List<LeadData> lstLead = new List<LeadData>();

        for(Lead objLead : [Select id,name,leadSource from Lead Limit 3]) {

            LeadData objLeadData = new LeadData();

            objLeadData.ShowDetails = false;

            objLeadData.lead = objLead;

            lstLead.add(objLeadData);

        }

        return lstLead;

    }

    public Class LeadData {

        @AuraEnabled public Boolean ShowDetails {get;set;}

        @AuraEnabled public Lead lead {get;set;}

    }

}

showHideLWC.html:

<template>

    <template for:each={lstLeadData} for:item="objLeadData">

        <lightning-card key={objLeadData.lead.Id}>

            <template if:false={objLeadData.ShowDetails} key={objLeadData.lead.Id}>

                    Lead: {objLeadData.lead.Name} <span data-id={objLeadData.lead.Id}  onclick={handleToggle}><a>Show More</a></span>

            </template>

            <template if:true={objLeadData.ShowDetails}>

                    Lead: {objLeadData.lead.Name} <span data-id={objLeadData.lead.Id}  onclick={handleToggle}><a>View Less</a></span>

                <div>

                    <div>Name :{objLeadData.lead.Name}</div>

                    <div>Lead Id :{objLeadData.lead.Id}</div>

                </div>

            </template>

        </lightning-card>

    </template>

</template>

showHideLWC.js:

import { LightningElement,track } from 'lwc';

import getLeads from '@salesforce/apex/LeadController.getLeads';

export default class ShowHideLWC extends LightningElement {

    @track lstLeadData;

    connectedCallback() {

        getLeads()

            .then(result => {

                this.lstLeadData = result;

                console.dir(result);

                console.table(result);

                console.log(result);

            })

            .catch(error => {

                this.error = error;

            });

    }

    handleToggle(event) {

        var leadId = event.currentTarget.dataset.id;

            this.lstLeadData.forEach(function(objLeadData){

                if(objLeadData.lead.Id == leadId) {

                    objLeadData.ShowDetails = !objLeadData.ShowDetails;

                }

               

            });

    }

}

showHideLWC.js-meta.xml:

<?xml version="1.0" encoding="UTF-8"?>

<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">

    <apiVersion>52.0</apiVersion>

    <isExposed>true</isExposed>

    <targets>

        <target>lightning__RecordPage</target>

        <target>lightning__HomePage</target>

    </targets>

</LightningComponentBundle>

Output: