About
ExpanderUtil is an intuitive, lightweight library that allows you to effortlessly create
togglable expanding content.
It uses a utility class system and associates expand triggers with
expand targets
To create an expander, you must declare an element to be a trigger. I.E. a title
or a button.
Every trigger must have a target. A target is an element who's contents will be
hidden by default until the trigger is toggled.
A trigger will always chose the next target for a pair. This is not changeable.
How To Use
Using ExpanderUtil is very simple. You only need to include it in your <head> tag
like so:
<script src="https://lib.jacq.dev/ex"></script>
The following utility classes will now be available:
- expandtrigger: an element that will act as the trigger
- expand: an element that will be the target
This is all you need to do in order to get going with ExpanderUtil! There is more
customisation available, read on to learn more.
Further Customisation
If you want to customise the library further, you can learn to do so here.
First, create your own copy of ExpanderUtil, by copying/downloading the code available
here.
Once you've done that, you can edit the "expander" object's settings.
The following settings are the defaults:
start of expander.js
let expander = {
target: 'expand',
trigger: 'expandtrigger',
expanded: 'expanded',
opened: '\u25BE',
unopened: '\u25B8',
hoverable: false
};
- Target: The class name for the targets
- Trigger: The class name for the triggers
- Expanded: The class name to flag a target to be automatically expanded on page
load
- Unopened: The symbol next to the trigger to indicate the
target is closed
Defaults to a right-arrow (▸)
- Opened: The symbol next to the trigger to indicate the
target is opened
Defaults to a down-arrow (▾)
- Hoverable: Whether the trigger needs only a hover or if it can
be toggled with a click.
- true: The trigger needs only a hover to activate
- false: The trigger requires a click to toggle the target
Notes
Please note that ExpanderUtil will always
position targets relatively, taking up space in the document. This
makes it ideal for content sections and spoilers. If you are looking to
super-impose content over other content, look into DropdownUtil.