Accordion
Toggles a class on elements via a button within them:
<ul ob-accordion="active: 1">
<li ob-accordion-item>
<div>
<span>Aenean posuere tortor sed cursus</span>
<button ob-accordion-item-toggle>Toggle</button>
</div>
<p class="content">
Nam pretium turpis et arcu. Phasellus leo dolor,
tempus non, auctor et, hendrerit quis, nisi. Nam
adipiscing. Morbi ac felis. Aliquam eu nunc.
</p>
</li>
<li ob-accordion-item>
<div>
<span>Maecenas ullamcorper dui et placerat</span>
<button ob-accordion-item-toggle>Toggle</button>
</div>
<p class="content">
Quisque id mi. Etiam sollicitudin, ipsum eu pulvinar
rutrum, tellus ipsum laoreet sapien, quis venenatis
ante odio sit amet eros.
</p>
</li>
<li ob-accordion-item>
<div>
<span>Sed fringilla mauris sit amet</span>
<button ob-accordion-item-toggle>Toggle</button>
</div>
<p class="content">
In hac habitasse platea dictumst. Ut id nisl quis
enim dignissim sagittis. Curabitur at lacus ac
velit ornare lobortis.
</p>
</li>
</ul>
[ob-accordion-item]:not(.is-active) .content {
display: none;
}
import { Watcher } from 'oblik'
import { Accordion } from 'oblik/components/accordion'
let w = new Watcher(document.body, {
components: {
accordion: Accordion
}
})
w.init()
# Options
#
active
Position in DOM of the initial item that should be activated.
Default: null
#
class
The name of the class that should be toggled on items.
Default: is-active