# Bruut Expander JS

The Expander plugin will show and hide elements based on a input (radio or checkbox or select option condition.

# Installation

Init or install the plugin:

npm install --save bruut-expander@latest

# Usage

Import Expander into your project and apply Expander.

By default, the package exports a function that attaches the Expander instance to all elements in the DOM with [data-expand]. You can still import the Expander instance as well, via a named import.

import bruutExpander from 'bruut-expander';
bruutExpander;

// Import the Expander instance (only needed if you want to do advanced stuff (AJAX etc))
import { Expander } from 'bruut-expander';

# Legacy import (1.x)

import bruutExpander from 'bruut-expander';

const expanders:NodeListOf<HTMLElement> = document.querySelectorAll('[data-expand]');

for (let i = 0, len = expanders.length; i < len; ++i) {
	new bruutExpander(expanders[i]);
}

# Checkbox

You can now bind Expander to your input:

input(type = "checkbox" data-expand data-show = "one" data-hide = "two")

.my-div(data-expand-id="one")
	p I will be hidden by default

Now, as you check the checkbox, the div with data-expand-id=“expand-this-1” will be shown and the div with data-expand-id=“two” will be hidden.

# Radio

With radio buttons, the syntax is nearly the same as the checkbox option. If you’d like to add multiple expander options, add the same [name] attribute to your options. Expander will pick up the group and monitor changes on each input, even if there’s no data-expand on the option.

input(type = "radio" name = "my-expand-group" data-expand data-show = "one")
input(type = "radio" name = "my-expand-group" data-expand data-show = "two")
input(type = "radio" name = "my-expand-group")

If the first input is checked, the div with [data-expand-id=“one”] will be shown. The div with [data-expand-id=“two”] will be hidden.

If the last input (the one without data-expand) is checked, both divs [data-expand-id=“one”] and [data-expand-id=“two”] will be hidden.

# Select

Add data-expand to a select and data-show or data-hide to it’s <option>’s to add Expander’s functionality. Expander will monitor changes on the select, even if there’s no data-expand on a option.

select(name = "select" data-expand)
	option(value = "1" data-show = "one") One
	option(value = "1" data-show = "two") Two
	option(value = "1" data-show = "three") Three

# A special note for Expander groups

You don’t need to hide the elements that a other option in a grouped Expander shows on selected per option. The plugin will take care of this itself.

So, in general: Think per option what you’d like to show or hide (other than the div’s you’d like to show when a other option in the group is checked).

Example:

select(name = "select" data-expand)
	option(value = "1" data-show = "one") One
	option(value = "1" data-show = "two") Two
	option(value = "1" data-show = "three") Three

When the first option is selected, Expander will hide two and three, because they aren’t called by the selected option. You don’t have to add data-hide=“two,three" to the first option to make sure that two and three will be hidden when one is active.

# Show multiple

If you need to show or hide multiple data-expand-id’s at the change of a option, use a comma seperated list in the data-show or data-hide attribute:

input(type = "checkbox" data-expand data-show = "one,two,three")