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);

Single Element

Since the expandable doesn't require a container element you can use it to toggle a class on another element anywhere in the DOM.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Group (first expanded)

Use a second data-expandable-group="{id}" attribute to make all of the expandables operate in an accordion fashion on click

Add the odo-expandable__trigger--open and odo-expandable__target--open classes to have an element be expanded on load

Example:

<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>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Group (none expanded)

If no "open" class is assigned to an element when instantiated, all targets will remain collapsed

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Animated Accordion (ExpandableAccordion)

The Animated Accordion includes animations for expanding/contracting as well as viewport scrolling right out of the box without any additional configuration.

To include animations just include the data-expandable-animated attribute on each trigger in your markup.

Example

<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>

Note: Animated Accordions require a second, nested element inside of the target element to read the height of when its parent is collapsed.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

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