こんにちは、アンダーソンです。
今回はlightning-accordionを実装してみました。
コンポーネントを折りたたむ要素があるので、
うまく使えばUI/UXの改善にも繋がるかと思います。
必要なところにうまく使えるように使い方をマスターしておきましょう。
lightning-accordionの使い方
lightning-accordionは下記のようにマークアップしていきます。
<lightning-accordion class="myAccordion" onsectiontoggle={handleToggleSection}>
<lightning-accordion-section name="Name" label="名前情報">
<p>僕の名前はアンダーソンです。</p>
</lightning-accordion-section>
<lightning-accordion-section name="Age" label="年齢情報">
<p>年齢は32歳です。</p>
</lightning-accordion-section>
<lightning-accordion-section name="Address" label="住所情報">
<p>住んでいるのは関西です。</p>
</lightning-accordion-section>
</lightning-accordion>
これで下記のように表示されます。

簡単ですね。
これはベーシックな形なので、年齢情報をクリックすると
名前情報は閉じられますので、一度に一つしか開くことができません。
複数を同時に開くには
他のを押した時に閉じずにそのままにして欲しいなんてことも
あるかもしれませんので、そんな時は下記のようにマークアップします。
<lightning-accordion allow-multiple-sections-open class="myAccordion">
allow-multiple-sections-openを入れるだけで、複数の同時オープンを
許可してくれます。
これで下記のように表示できます。

基本的な使い方は以上です。
JavaScriptで開いたAccordionがどれかなども見ることもできますし、
Accordion内にボタンを配置したりもできます。
是非他にも試してみてください。