xpand
v1.0.0
Published
jQuery pluging for accordions and expanding blocks
Downloads
4
Maintainers
Readme
xpand
jQuery plugin for accordions and expanding blocks
Displays target on this
click and hides on another.
How to use
Define js-xpand
class on element, which will control toggling of blocks:
import $ from 'jquery'
import 'xpand'
$(() => {
$('.js-xpand').xpand()
})
It's recommended to use <button>
as controlling elements, since it will keep
everything accessible for keyboards out of box.
With default settings, set js-xpand__target
on element, which should be expanded.
If scoping enabled, with default settings set js-xpand__scope
on any parent, to define
scope, within which js-xpand
should search for targets to expand.
Note, that it's possible to control single target with few buttons, but current plugin will not propagate target changes to another button. So it's up to end user to be accurate with scopes.
Settings
Defaults can be changed by passing options as an object to xpand
call. See index.js
for list of possible settings.
On-the-fly adjustment
Individual expander behaviour can be altered by setting following attributes
on html element, bearing js-xpand
:
class='is-active'
— to make target expanded by default.data-xpand='{{ your query }}'
:false
or unspecified - toggles targets, defined byuserOptions.defaultTargetQuery
query.your query
— query of a container, which should be expanded on this click.
data-xpand-scope='{{ next || true || your query }}'
:false
or unspecified — selects absolutely all targets defined bydata-xpand
querynext
— selects all next siblings with defined indata-xpand
query.true
— selects all targets defined bydata-xpand
query within scope, defined by closest container, which defined byuserOptions.defaultScopeQuery
query.your query
— same astrue
, but you can specify specific query of defining scope container.
Usage examples
<div>
<button class='js-xpand' data-xpand='.js-xpand__target1'>Togle 1</button>
<p class='js-xpand__target1'>Content 1</p>
</div>
<div class='js-xpand__scope11'>
<button class='js-xpand is-active' data-xpand-scope='.js-xpand__scope11'>Togle scope 11</button>
<p class='js-xpand__target'>Togle 1</p>
</div>