Expand/Collapse Sections In Salesforce Lightning Web Component(lwc)

This post explains how to create expand/collapse sections in Salesforce Lightning Web Component(lwc) using the details tag in html.

Demo:

HTML Code:

<template>
    <lightning-card title="Expand/Collapse Sections In Salesforce Lightning Web Component"><br />
        <div style="padding-left: 10px;">
            <details open>
                <summary>India</summary>
                <ul>
                    <li>Hyderabad</li>
                    <li>Delhi</li>
                    <li>Mumbaie</li>
                </ul>
            </details><br>
            <details>
                <summary>USA</summary>
                <ul>
                    <li>New York</li>
                    <li>Las Vegas</li>
                    <li>Miami</li>
                </ul>
            </details><br>
            <details>
                <summary>China</summary>
                <ul>
                    <li>Shenzhen</li>
                    <li>Guangzhou</li>
                    <li>Shanghai</li>
                </ul>
            </details>
        </div>
    </lightning-card>
</template>

CSS

details > summary {
  padding: 4px;
  background-color: #eeeeee;
  outline: none;
}

Output