Toggle

Simply toggles a class on an element. Useful for showing and hiding mobile navigation menus.

<button ob-toggle="$target: @sibling">
	Toggle
</button>

<nav>
	<ul>
		<li><a href="#">Foo</a></li>
		<li><a href="#">Bar</a></li>
		<li><a href="#">Baz</a></li>
	</ul>
</nav>

nav:not(.is-active) {
	display: none;
}

import { Watcher } from 'oblik'
import { Toggle } from 'oblik/components/toggle'

let w = new Watcher(document.body, {
	components: {
		toggle: Toggle
	}
})

w.init()

# Options

# target

To what element the class should be added.

Required.

# on

Event that adds the class. If off is not set, this will toggle the class instead.

Default: click

# off

Event that removes the class.

Default: undefined

# active

Initial toggled state.

Default: false

# class

The added class.

Default: is-active