Good Accordion
·
WordPress accordion blok. Simpel, klein en goed.
Simpele en goede accordion plugin die 2 blokken biedt: Accordion en Accordion-pane. Versleep een Accordion blok naar je bericht, pagina of extra berichttype en druk op de ‘Paneel toevoegen’ knop zo vaak als je nodig hebt.
Functies:
- Instelling voor ‘Eén tegelijk’. Slechts één paneel binnen een accordeon kan worden geopend. Haal het vinkje weg om toe te staan dat alle panelen tegelijkertijd worden geopend.
- Gebruik de ‘Tab’ toets om op de panelen te focussen en druk op ‘Enter’ om te openen
- Extensive Use of Accessability attributes
- Optionally choose for HTML and tags.
- Panelen scrollen in beeld wanneer een vorig paneel gesloten wordt
- Pas kleuren, marges en padding aan in de blok-editor
- Styling toevoegen via css, css-vars of theme.json
Gebruik
Versleep een Accordion blok naar een bericht of pagina of CPT en gebruik de ‘Paneel toevoegen’ knop onderaan het blok om paneel-blokken toe te voegen.
stijling
Bij de basis worden enkele basisstijlvariabelen gedefinieerd die door je thema kunnen worden overschreven. Sommige hiervan kunnen ad hoc door de gebruiker in de blok-editor worden gewijzigd. Deze zijn:
--wp--custom--accordion--transition-time: 0.1s;
--wp--custom--accordion--margin-top: 0px;
--wp--custom--accordion--margin-right: 0px;
--wp--custom--accordion--margin-bottom: 0.1em;
--wp--custom--accordion--margin-left: 0px;
--wp--custom--accordion--header-padding-top: 0.5em;
--wp--custom--accordion--header-padding-right: 2em;
--wp--custom--accordion--header-padding-bottom: 0.5em;
--wp--custom--accordion--header-padding-left: 2em;
--wp--custom--accordion--content-padding-top: 0.5em;
--wp--custom--accordion--content-padding-right: 2em;
--wp--custom--accordion--content-padding-bottom: 0.5em;
--wp--custom--accordion--content-padding-left: 2em;
--wp--custom--accordion--header--text-color: #ffffff;
--wp--custom--accordion--header--background-color: #666666;
--wp--custom--accordion--header--active-text-color: #ffffff;
--wp--custom--accordion--header--active-background-color: #999999;
--wp--custom--accordion--body--text-color: #ffffff;
--wp--custom--accordion--body--background-color: #666666;
De standaardwaarden kunnen ook worden gedefinieerd in de theme.json van je (sub-)thema:
Voeg ze toe aan de theme.json zoals dit:
{
"$schema": "https://schemas.wp.org/wp/6.7/theme.json",
"version": 3,
"settings": {
"custom": {
"accordion": {
"transitionTime": "0.1s",
"marginTop": "0px",
"marginRight": "0px",
"marginBottom": "0.1em",
"marginLeft": "0px",
"headerPaddingTop": "1em",
"headerPaddingRight": "1em",
"headerPaddingBottom": "1em",
"headerPaddingLeft": "1em",
"contentPaddingTop": "0.5em",
"contentPaddingRight": "2em",
"contentPaddingBottom": "0.5em",
"contentPaddingLeft": "2em",
"headerTextColor": "#ffffff",
"headerBackgroundColor" : "#666666",
"activeHeaderTextColor": "#ffffff"
"activeHeaderBackgroundColor": "#999999",
"bodyTextColor": "#000000",
"bodyBackgroundColor" : "#ffffff",
}
}
}
}<h3>Accessability</h3>The pane-headers have a tab-index. If the Enter-key is pressed while a pane-header has focus, a click-event is triggered on that pane-header thereby activating / opening it.