Accordion

Expandable/collapsible content sections.

Live Demo

Source

HTML + JavaScript 
<div data-component="my-accordion">
    <div data-list="items">
        <template>
            <div class="accordion-item">
                <div class="accordion-header" data-action="toggle">
                    <span data-bind="title"></span>
                    <span data-show="open">&#9650;</span><span data-show="!open">&#9660;</span>
                </div>
                <div class="accordion-body" data-show="open">
                    <span data-bind="content"></span>
                </div>
            </div>
        </template>
    </div>
</div>

<script>
wildflower.component('my-accordion', {
    state: {
        items: [
            { title: 'Section One', content: 'Content for section one.', open: true },
            { title: 'Section Two', content: 'Content for section two.', open: false },
            { title: 'Section Three', content: 'Content for section three.', open: false }
        ]
    },
    toggle(e, el, { index }) {
        this.items[index].open = !this.items[index].open;
    }
});
</script>

Key Points

  • data-list renders each section from the items array
  • Each item's open property controls its own visibility via data-show
  • The action method receives (event, element, { index }); use the index to access the item
  • Nested property mutation (this.items[index].open) is fully reactive

Related documentation

Lists & Iteration →