Odo Expandable

A simple, accessible combination of two elements; A trigger to handle clicks, and a target to toggle visibility.

Expandable items can be grouped to behave in an accordion type fashion.

Support

IE9+ with polyfills.

To support IE<=11, you will need to add a classList and the Element#closest polyfills.

Dependencies

Odo Helpers, OdoWindowEvents.

Markup

The only two required pieces are a button element with a data-expandable-trigger="{id}" attribute and any other element with a id="{id}" attribute.

<button data-expandable-trigger="demo-single-expand">Trigger</button>
<div id="demo-single-expand">Target</div>

Setup

Simply call the static method, initializeAll() and Expandable will instantiate all instances of itself.

OdoExpandable.initializeAll();

You can initialize individual Expandable Items with new ExpandableItem(triggerEl);...

import { ExpandableItem } from '@odopod/odo-expandable';

new ExpandableItem(triggerEl);

...or you can initialize individual Expandable Items with new ExpandableGroup(triggerElements);...

import { ExpandableGroup } from '@odopod/odo-expandable';

new ExpandableGroup(triggerElements);

...or you can initialize an animated accordion with new ExpandableAccordion(triggerElements);

import { ExpandableAccordion } from '@odopod/odo-expandable';

new ExpandableAccordion(triggerElements);

<button class="odo-expandable__trigger--open" data-expandable-trigger="demo-expand-1" data-expandable-group="demo-group-1">Trigger 1</button>
<div class="odo-expandable__target--open" id="demo-expand-1" data-expandable-group="demo-group-1">First Content</div>

<button data-expandable-trigger="demo-expand-2" data-expandable-group="demo-group-1">Trigger2</button>
<div id="demo-expand-2" data-expandable-group="demo-group-1">Second Content</div>

<button data-expandable-trigger="demo-expand-3" data-expandable-group="demo-group-1">Trigger 3</button>
<div id="demo-expand-3" data-expandable-group="demo-group-1">Third Content</div>

<button data-expandable-animated data-expandable-trigger="demo-expand-7" data-expandable-group="demo-group-3">Trigger</button>
<div id="demo-expand-7" data-expandable-group="demo-group-3"><div>Target</div></div>

<button data-expandable-animated data-expandable-trigger="demo-expand-8" data-expandable-group="demo-group-3">Trigger</button>
<div id="demo-expand-8" data-expandable-group="demo-group-3"><div>Target</div></div>

CSS

The only CSS needed is to style the odo-expandable__trigger--open and odo-expandable__target--open classes to your need.

/* Your rules */
.your-target-class { display: none; }

/* Classes Added By Expandable to target with display/height/transform/etc rules */
.odo-expandable__trigger--open { color: blue; }
.odo-expandable__target--open { display: block; }

Public Properties

expandableItem.isOpen // gets the state of the expandable item.
expandable.id // returns the id of the expandable item.

Public Methods

expandableItem.toggle() // toggles the state of a single, expandable item.
expandableItem.open() // opens an expandable item (if it is closed).
expandableItem.close() // opens an expandable item (if it is open).
expandableGroup.toggleVisibility(id) // toggles the visibility of the selected item and collapses the others.
expandableItem.dispose()
expandableGroup.dispose()
expandableAccordion.update() // update scroll-to offsets