Toggle content, e.g. dropdowns with overlay. Separates CSS and HTML. Focus inside panel when toggled. Uses ARIA.
<div class="Toggle">
<button class="Toggle-handle" type="button">Handle</button>
<div class="Toggle-panel">
<h2>Panel content</h2>
</div>
</div>
| Key | Type | Default | Note |
|---|---|---|---|
evt |
string |
click |
|
selectElem |
string |
.Toggle |
|
selectHandle |
string |
.Toggle-handle |
|
selectPanel |
string |
.Toggle-panel |
|
selectFocus |
string |
input, a |
|
expanded |
string |
is-expanded |
|
dataAttr |
string |
data-toggle |
|
autoClose |
boolean |
true |
|
keepOpen |
boolean |
false |
|
classPosition |
object |
top: false, left: false, right: ' |
|
classPosition.top |
boolean string |
false |
Top edge is outside viewport, add this class. |
classPosition.left |
boolean string |
false |
Left edge is outside viewport, add this class. |
classPosition.right |
boolean string |
Toggle-panel--right |
Rigth edge is outside viewport, add this class. |
classPosition.bottom |
boolean string |
Toggle-panel--up |
Bottom edge is outside viewport, add this class. |
merl.toggle.init();
merl.toggle.init( {
selectFocus: 'input.search',
keepOpen: true
} );
| Key | Type | Note |
|---|---|---|
evt |
string |
Event on handle. |
focus |
string |
Selector to get focus. |
handle |
string |
Specifik handle. |
alternate |
string |
Alternative text when toggle is expanded. |
keepOpen |
boolean |
If panel should be kept open. |
<div class="Toggle" data-toggle='{"focus": ".link", "keepOpen": true}'>
Make sure you test in important browsers. I’ve targeted modern browsers, such as IE10+.