Good Accordion

Beschrijving

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.