Do not render data when lightning-accordion is collapsed

Question

I have a lightning accordion and lightning accordion section with some data when they are expanded. I would like to show/render this data only when the accordion is expanded/open and when it is collapsed not to show this data.Now i think even when it is closed the data is still there. Is it possible to have this feature? My code so far HTML

<template>

    <div class="slds-box slds-theme_default">
        <lightning-accordion class="example-accordion"
                            onsectiontoggle={handleToggleSection}
                            allow-multiple-sections-open
                            active-section-name={activeSections}>
            <lightning-accordion-section class="slds-theme_shade" name="A" label="Team Parent">
                <article class="slds-card">
                    <div class="slds-card__header slds-grid">
                    <header class="slds-media slds-media_center slds-has-flexi-truncate">
                    <div class="slds-media__figure">
                    <span class="slds-icon_container slds-icon-standard-contact" title="contact">
                    <span class="slds-assistive-text">contact</span>
                    </span>
                    </div>
                    <div class="slds-media__body">
                    <h2 class="slds-card__header-title">
                    <a href="#" class="slds-card__header-link slds-truncate" title="Contacts (1)">
                    <span></span>
                    </a>
                    </h2>
                    </div>
                    </header>
                    </div>
                    <div class="slds-card__body">
                    <table class="slds-table slds-table_cell-buffer slds-no-row-hover slds-table_bordered slds-table_fixed-layout" role="grid" aria-label="Example table in a Card">
                    <thead>
                    <tr class="slds-line-height_reset">
                    <th class="" scope="col">
                    <div class="slds-truncate" title="Name">Relation</div>
                    </th>
                    <th class="" scope="col">
                    <div class="slds-truncate" title="Company">Position</div>
                    </th>
                    <th class="" scope="col">
                    <div class="slds-truncate" title="Title">Position Name</div>
                    </th>
                    <th class="" scope="col">
                    <div class="slds-truncate" title="Email">Employee ID</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Email">Employee Name</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Email">Effective Date</div>
                    </th>
                    <th class="" scope="col">
                        <div class="slds-truncate" title="Email">End Date</div>
                    </th>
                    <th class="" scope="col">
                        
                       <!-- <lightning-button-icon icon-name="utility:filterList"   alternative-text="Filter parent" class="slds-m-left_xx-small" title="Filter"></lightning-button-icon>
                        <lightning-button-icon icon-name="utility:download"   alternative-text="Download parent" class="slds-m-left_xx-small" title="Download"></lightning-button-icon> -->
                        <lightning-button-icon icon-name="utility:add"   alternative-text="Add parent" class="slds-m-left_xx-small" title="Add Parent"></lightning-button-icon>
                    
                    </th> 
                    </tr>
                   
                    </thead>
                    <tbody>
                    <tr class="slds-hint-parent">
                    <th scope="row">
                    <div class="slds-truncate" title="Amy Choi">
                    <a href="#" tabindex="-1">CL5-LDRS-RM-B1</a>
                    </div>
                    </th>
                    <td role="gridcell">
                    <div class="slds-truncate" title="Company One">Jane Doe</div>
                    </td>
                    <td role="gridcell">
                    <div class="slds-truncate" title="Director of Operations">Director of Operations</div>
                    </td>
                    <td role="gridcell">
                    <div class="slds-truncate" title="adam@company.com">2/6/2022</div>
                    </td>
                    </tr>
                    </tbody>
                    </table>
                    </div>
                    <footer class="slds-card__footer">
                    <a class="slds-card__footer-action" href="#">View All
                    <span class="slds-assistive-text">Contacts</span>
                    </a>
                    </footer>
                    </article>
            </lightning-accordion-section>
        </lightning-accordion> 
    </div>   
    
</template>

JS

import { LightningElement } from 'lwc';

export default class teamDetailsParentCmp extends LightningElement {

    activeSections = ['A', 'C'];
    handleToggleSection(event) {

        console.log( 'Selected Sections ' + event.detail.openSections );

    }
}

Answer 1

In summary, no. If you want different behavior, you're going to have to write your own component. The blueprint is actually pretty simple. The reason why the data is still in the background is so that users don't lose data when they collapse and expand the sections, and those sections include data the user doesn't expect to lose (like input values).