Accordion
Accordion is an interactive element that works alongside Accordion Item to organise and display content in a collapsible and expandable way.
The example below uses the icon
and icon-trailing
attributes to replace the chevron indicators with plus and minus icons.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-accordion expand-mode="multi"> <vwc-accordion-item class="accordion-item" icon-trailing icon="minus-line" heading="Accordion item 1" expanded > This is the first item's accordion body. </vwc-accordion-item> <vwc-accordion-item class="accordion-item" icon-trailing icon="plus-line" heading="Accordion item 2" > This is the second item's accordion body. </vwc-accordion-item> </vwc-accordion> <script> document.querySelectorAll('.accordion-item').forEach((item) => { item.addEventListener('change', (e) => { if (e.target !== item) { return; } const iconName = item.getAttribute('icon'); iconName === 'minus-line' ? item.setAttribute('icon', 'plus-line') : item.setAttribute('icon', 'minus-line'); }); }); </script>
The example below shows how a single Accordion Item can be used inside an Action Group component (which provides the border) to create a stand alone expandable section of content.
<!-- Feel free to edit the code below. The live preview will update as you make changes. --> <vwc-action-group class="action-group"> <vwc-accordion-item class="accordion-item" heading="Expandable Section"> This is the content for the expandable section. </vwc-accordion-item> </vwc-action-group> <style> .action-group, .accordion-item { display: block; inline-size: 100%; } </style>