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

← Components Carousel →