Open All Details Blocks

This interaction allows a button to open all Details blocks on the page with a single click. When the button is clicked, every Details block automatically expands to reveal its content.

How it works

Trigger: Click - The effect is activated when the user clicks the button.

Action: Update Attribute - Adds the open  attribute to all Core Details blocks on the page, causing them to expand.

How to use

Select a button to apply the interactions to, then import the interaction.

Interactions used

• Click Interaction
• Update Attribute Action

Code Block

<!-- wp:columns -->
<div class="wp-block-columns"><!-- wp:column {"style":{"spacing":{"padding":{"top":"0","bottom":"0"}},"border":{"radius":"0px"}}} -->
<div class="wp-block-column" style="border-radius:0px;padding-top:0;padding-bottom:0"><!-- wp:details {"style":{"color":{"background":"#0b0d4b"},"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"spacing":{"blockGap":"var:preset|spacing|30","padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}},"border":{"width":"0px","style":"none"}},"textColor":"base","fontSize":"large"} -->
<details class="wp-block-details has-base-color has-text-color has-background has-link-color has-large-font-size" style="border-style:none;border-width:0px;background-color:#0b0d4b;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--40)"><summary>Accordion 1</summary><!-- wp:paragraph {"placeholder":"Type / to add a hidden block","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"textColor":"base"} -->
<p class="has-base-color has-text-color has-link-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details -->

<!-- wp:details {"style":{"color":{"background":"#0b0d4b"},"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"spacing":{"blockGap":"var:preset|spacing|30","padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}},"border":{"width":"0px","style":"none"}},"textColor":"base","fontSize":"large"} -->
<details class="wp-block-details has-base-color has-text-color has-background has-link-color has-large-font-size" style="border-style:none;border-width:0px;background-color:#0b0d4b;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--40)"><summary>Accordion 2</summary><!-- wp:paragraph {"placeholder":"Type / to add a hidden block","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"textColor":"base"} -->
<p class="has-base-color has-text-color has-link-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details -->

<!-- wp:details {"style":{"color":{"background":"#0b0d4b"},"elements":{"link":{"color":{"text":"var:preset|color|base"}}},"spacing":{"blockGap":"var:preset|spacing|30","padding":{"top":"var:preset|spacing|30","bottom":"var:preset|spacing|30","left":"var:preset|spacing|40","right":"var:preset|spacing|40"}},"border":{"width":"0px","style":"none"}},"textColor":"base","fontSize":"large"} -->
<details class="wp-block-details has-base-color has-text-color has-background has-link-color has-large-font-size" style="border-style:none;border-width:0px;background-color:#0b0d4b;padding-top:var(--wp--preset--spacing--30);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--30);padding-left:var(--wp--preset--spacing--40)"><summary>Accordion 3</summary><!-- wp:paragraph {"placeholder":"Type / to add a hidden block","style":{"elements":{"link":{"color":{"text":"var:preset|color|base"}}}},"textColor":"base"} -->
<p class="has-base-color has-text-color has-link-color">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details -->

<!-- wp:buttons -->
<div class="wp-block-buttons"><!-- wp:button {"style":{"spacing":{"padding":{"left":"var:preset|spacing|40","right":"var:preset|spacing|40","top":"var:preset|spacing|20","bottom":"var:preset|spacing|20"}},"color":{"background":"#f00069"}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-background wp-element-button" style="background-color:#f00069;padding-top:var(--wp--preset--spacing--20);padding-right:var(--wp--preset--spacing--40);padding-bottom:var(--wp--preset--spacing--20);padding-left:var(--wp--preset--spacing--40)">Open All</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:column --></div>
<!-- /wp:columns -->

Interaction Code

{
    "type": "click",
    "timelines": [
        {
            "loop": false,
            "onceOnly": false,
            "alternate": false,
            "reset": false,
            "reverse": false,
            "actions": [
                {
                    "type": "updateAttribute",
                    "key": "action_e5457136e5",
                    "target": {
                        "type": "block-name",
                        "value": "core/details",
                        "blockName": "core/details",
                        "options": ""
                    },
                    "timing": {
                        "isStartingState": false,
                        "start": 0,
                        "duration": 0.5,
                        "easing": "outCirc",
                        "customEasing": ""
                    },
                    "value": {
                        "attribute": "open",
                        "value": "true",
                        "action": "update"
                    }
                }
            ]
        }
    ]
}