ska-theme includes an Alpine.js component for creating an accordion.
interface AccordionConfig {
/** Only one accordion open at the same time. */
exclusive?: boolean
/** Ensure opened accordion content will be visible on the screen (default: true). */
scrollIntoView?: boolean
/** Transition duration in ms (default: 350). */
transitionDuration?: number
}For creating an accordion, add the x-data="skaAccordion" attribute to the root element.
All direct children of that element should have the attribute x-bind="item".
The item elements should have 2 child elements, one with x-bind="toggle" and another with x-bind="content".
There is 1 argument available for the skaAccordion component: exclusive. Using x-data="skaAccordion({exclusive: true})" will ensure that only 1 accordion tab is open at the same time.
To have an accordion section be open initially, add the active class to that section.
Tip: Don’t add margin or padding to the [x-bind="content"] element, because that can prevent the animation from being smooth. Instead, wrap the contents of that element with another element or add margin/padding to the first child.
Example accordion
Illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.
Dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.
Quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.
Amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.
In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.
<!-- wp:ska/element {"metadata":{"name":"Accordion"},"skaBlocksMargin":{"v":{"$":{"@":"","x":"auto"}},"t":"axis"},"skaBlocksSpaceBetween":{"v":{"$":{"@":"","y":"2"}}},"skaBlocksWidth":{"v":{"$":{"@":"full"}}},"skaBlocksMaxWidth":{"v":{"$":{"@":"3xl"}}},"skaBlocksMinHeight":{"v":{"$":{"@":"[16rem]"}},"a":["[16rem]"]},"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-data":"skaAccordion({exclusive: true})"}},"skaBlocks":{"cx":"[\u0026_[x-bind=toggle]]:*:flex [\u0026_[x-bind=toggle]]:*:justify-between [\u0026_[x-bind=toggle]]:*:items-center [\u0026_[x-bind=toggle]]:*:px-4 [\u0026_[x-bind=toggle]]:*:py-2 *:[\u0026_[x-bind=content]]:*:px-4 *:[\u0026_[x-bind=content]]:*:pb-2 mx-auto space-y-2 w-full [\u0026_[x-bind=toggle]]:*:w-full [\u0026_.icon]:[\u0026_[x-bind=toggle]]:*:w-5 max-w-3xl [\u0026_.icon]:[\u0026_[x-bind=toggle]]:*:h-auto min-h-[16rem] *:[\u0026_[x-bind=content]]:*:text-base [\u0026_[x-bind=toggle]]:*:font-semibold [\u0026_.icon]:[\u0026_[x-bind=toggle]]:*:text-current *:bg-white [\u0026_.icon]:[\u0026_[x-bind=toggle]]:*:transition-transform [\u0026_.icon]:[\u0026.active]:*:-rotate-180","t":1709756495,"css":".mx-auto{margin-left:auto;margin-right:auto}.min-h-\\[16rem\\]{min-height:16rem}.w-full{width:100%}.max-w-3xl{max-width:50rem}.space-y-2 \u003e :not([hidden]) ~ :not([hidden]){\u002d\u002dtw-space-y-reverse:0;margin-top:calc(var(\u002d\u002dska-spacing-2) * calc(1 - var(\u002d\u002dtw-space-y-reverse)));margin-bottom:calc(var(\u002d\u002dska-spacing-2) * var(\u002d\u002dtw-space-y-reverse))}.\\*\\:bg-white \u003e *{\u002d\u002dtw-bg-opacity:1;background-color:rgba(var(\u002d\u002dska-rgb-white),1)}.\\[\\\u0026_\\.icon\\]\\:\\[\\\u0026\\.active\\]\\:\\*\\:-rotate-180 \u003e *.active .icon{\u002d\u002dtw-rotate:-180deg;transform:translate(var(\u002d\u002dtw-translate-x),var(\u002d\u002dtw-translate-y)) rotate(var(\u002d\u002dtw-rotate)) skewX(var(\u002d\u002dtw-skew-x)) skewY(var(\u002d\u002dtw-skew-y)) scaleX(var(\u002d\u002dtw-scale-x)) scaleY(var(\u002d\u002dtw-scale-y))}.\\*\\:\\[\\\u0026_\\[x-bind\\=content\\]\\]\\:\\*\\:px-4 \u003e * [x-bind=content] \u003e *{padding-left:var(\u002d\u002dska-spacing-4);padding-right:var(\u002d\u002dska-spacing-4)}.\\*\\:\\[\\\u0026_\\[x-bind\\=content\\]\\]\\:\\*\\:pb-2 \u003e * [x-bind=content] \u003e *{padding-bottom:var(\u002d\u002dska-spacing-2)}.\\*\\:\\[\\\u0026_\\[x-bind\\=content\\]\\]\\:\\*\\:text-base \u003e * [x-bind=content] \u003e *{font-size:var(\u002d\u002dska-font-size-base);line-height:var(\u002d\u002dska-font-size-base-lh)}.\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:flex \u003e * [x-bind=toggle]{display:flex}.\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:w-full \u003e * [x-bind=toggle]{width:100%}.\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:items-center \u003e * [x-bind=toggle]{align-items:center}.\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:justify-between \u003e * [x-bind=toggle]{justify-content:space-between}.\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:px-4 \u003e * [x-bind=toggle]{padding-left:var(\u002d\u002dska-spacing-4);padding-right:var(\u002d\u002dska-spacing-4)}.\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:py-2 \u003e * [x-bind=toggle]{padding-top:var(\u002d\u002dska-spacing-2);padding-bottom:var(\u002d\u002dska-spacing-2)}.\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:font-semibold \u003e * [x-bind=toggle]{font-weight:var(\u002d\u002dska-font-weight-semibold)}.\\[\\\u0026_\\.icon\\]\\:\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:h-auto \u003e * [x-bind=toggle] .icon{height:auto}.\\[\\\u0026_\\.icon\\]\\:\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:w-5 \u003e * [x-bind=toggle] .icon{width:var(\u002d\u002dska-spacing-5)}.\\[\\\u0026_\\.icon\\]\\:\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:text-current \u003e * [x-bind=toggle] .icon{color:currentColor}.\\[\\\u0026_\\.icon\\]\\:\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:transition-transform \u003e * [x-bind=toggle] .icon{transition-property:transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}"},"skaBlocksSelectors":{"*":{"skaBlocksBackgroundColor":{"v":{"$":{"@":"white"}}},"skaBlocksSelectors":{"[\u0026_[x-bind=toggle]]":{"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksJustifyContent":{"v":{"$":{"@":"between"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocksPadding":{"v":{"$":{"@":"","x":"4","y":"2"}},"t":"axis"},"skaBlocksWidth":{"v":{"$":{"@":"full"}}},"skaBlocksFontWeight":{"v":{"$":{"@":"semibold"}}},"skaBlocksSelectors":{"[\u0026_.icon]":{"skaBlocksWidth":{"v":{"$":{"@":"5"}}},"skaBlocksHeight":{"v":{"$":{"@":"auto"}}},"skaBlocksTextColor":{"v":{"$":{"@":"current"}}},"skaBlocksSelectors":[],"skaBlocksTransitionProperty":{"v":{"$":{"@":"transform"}}}}}},"[\u0026_[x-bind=content]]":{"skaBlocksSelectors":{"*":{"skaBlocksPadding":{"v":{"$":{"@":"","x":"4","b":"2"}},"t":"sides"},"skaBlocksFontSize":{"v":{"$":{"@":"base"}}}}}},"[\u0026.active]":{"skaBlocksSelectors":{"[\u0026_.icon]":{"skaBlocksRotate":{"v":{"$":{"@":"-180"}}}}}}}}}} -->
<div x-data="skaAccordion({exclusive: true})" class="[&_[x-bind=toggle]]:*:flex [&_[x-bind=toggle]]:*:justify-between [&_[x-bind=toggle]]:*:items-center [&_[x-bind=toggle]]:*:px-4 [&_[x-bind=toggle]]:*:py-2 *:[&_[x-bind=content]]:*:px-4 *:[&_[x-bind=content]]:*:pb-2 mx-auto space-y-2 w-full [&_[x-bind=toggle]]:*:w-full [&_.icon]:[&_[x-bind=toggle]]:*:w-5 max-w-3xl [&_.icon]:[&_[x-bind=toggle]]:*:h-auto min-h-[16rem] *:[&_[x-bind=content]]:*:text-base [&_[x-bind=toggle]]:*:font-semibold [&_.icon]:[&_[x-bind=toggle]]:*:text-current *:bg-white [&_.icon]:[&_[x-bind=toggle]]:*:transition-transform [&_.icon]:[&.active]:*:-rotate-180 wp-block-ska-element"><!-- wp:ska/element {"className":"active","skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-bind":"item"}},"skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<div x-bind="item" class="wp-block-ska-element active"><!-- wp:ska/element {"skaBlocksAs":{"href":"#","opensInNewTab":false,"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"toggle"}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<button x-bind="toggle" class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocks":{"cx":"","t":0}} -->
<span class="wp-block-ska-text ska-text">Question #1</span>
<!-- /wp:ska/text -->
<!-- wp:ska/image {"mode":"icon","svg":"\u003csvg data-svg-width=\u002224\u0022 data-svg-height=\u002224\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\u003cpath fill-rule=\u0022evenodd\u0022 clip-rule=\u0022evenodd\u0022 d=\u0022M11.4697 7.71967C11.7626 7.42678 12.2374 7.42678 12.5303 7.71967L20.0303 15.2197C20.3232 15.5126 20.3232 15.9874 20.0303 16.2803C19.7374 16.5732 19.2626 16.5732 18.9697 16.2803L12 9.31066L5.03033 16.2803C4.73744 16.5732 4.26256 16.5732 3.96967 16.2803C3.67678 15.9874 3.67678 15.5126 3.96967 15.2197L11.4697 7.71967Z\u0022 fill=\u0022currentColor\u0022/\u003e\n\u003c/svg\u003e\n","collection":"heroicons","icon":"24/solid/chevron-up","skaBlocks":{"cx":"","t":1709756495,"css":""},"skaBlocksAttributes":{"record":{"aria-hidden":"true"}},"className":"icon"} -->
<div role="figure" aria-hidden="true" class="wp-block-ska-image icon"><svg data-svg-width="24" data-svg-height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4697 7.71967C11.7626 7.42678 12.2374 7.42678 12.5303 7.71967L20.0303 15.2197C20.3232 15.5126 20.3232 15.9874 20.0303 16.2803C19.7374 16.5732 19.2626 16.5732 18.9697 16.2803L12 9.31066L5.03033 16.2803C4.73744 16.5732 4.26256 16.5732 3.96967 16.2803C3.67678 15.9874 3.67678 15.5126 3.96967 15.2197L11.4697 7.71967Z" fill="currentColor"></path>
</svg></div>
<!-- /wp:ska/image --></button>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-bind":"content","x-cloak":""}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<div x-bind="content" x-cloak="" class="wp-block-ska-element"><!-- wp:ska/element -->
<div class="wp-block-ska-element"><!-- wp:paragraph {"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<p>Illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<p>Dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-bind":"item"}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<div x-bind="item" class="wp-block-ska-element"><!-- wp:ska/element {"skaBlocksAs":{"href":"#","opensInNewTab":false,"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"toggle"}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<button x-bind="toggle" class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocks":{"cx":"","t":0}} -->
<span class="wp-block-ska-text ska-text">Question #2</span>
<!-- /wp:ska/text -->
<!-- wp:ska/image {"mode":"icon","svg":"\u003csvg data-svg-width=\u002224\u0022 data-svg-height=\u002224\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\u003cpath fill-rule=\u0022evenodd\u0022 clip-rule=\u0022evenodd\u0022 d=\u0022M11.4697 7.71967C11.7626 7.42678 12.2374 7.42678 12.5303 7.71967L20.0303 15.2197C20.3232 15.5126 20.3232 15.9874 20.0303 16.2803C19.7374 16.5732 19.2626 16.5732 18.9697 16.2803L12 9.31066L5.03033 16.2803C4.73744 16.5732 4.26256 16.5732 3.96967 16.2803C3.67678 15.9874 3.67678 15.5126 3.96967 15.2197L11.4697 7.71967Z\u0022 fill=\u0022currentColor\u0022/\u003e\n\u003c/svg\u003e\n","collection":"heroicons","icon":"24/solid/chevron-up","skaBlocks":{"cx":"","t":1709756495,"css":""},"skaBlocksAttributes":{"record":{"aria-hidden":"true"}},"className":"icon"} -->
<div role="figure" aria-hidden="true" class="wp-block-ska-image icon"><svg data-svg-width="24" data-svg-height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4697 7.71967C11.7626 7.42678 12.2374 7.42678 12.5303 7.71967L20.0303 15.2197C20.3232 15.5126 20.3232 15.9874 20.0303 16.2803C19.7374 16.5732 19.2626 16.5732 18.9697 16.2803L12 9.31066L5.03033 16.2803C4.73744 16.5732 4.26256 16.5732 3.96967 16.2803C3.67678 15.9874 3.67678 15.5126 3.96967 15.2197L11.4697 7.71967Z" fill="currentColor"></path>
</svg></div>
<!-- /wp:ska/image --></button>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-bind":"content","x-cloak":""}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<div x-bind="content" x-cloak="" class="wp-block-ska-element"><!-- wp:ska/element -->
<div class="wp-block-ska-element"><!-- wp:paragraph {"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<p>Quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<p>Amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-bind":"item"}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<div x-bind="item" class="wp-block-ska-element"><!-- wp:ska/element {"skaBlocksAs":{"href":"#","opensInNewTab":false,"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"toggle"}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<button x-bind="toggle" class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocks":{"cx":"","t":0}} -->
<span class="wp-block-ska-text ska-text">Question #3</span>
<!-- /wp:ska/text -->
<!-- wp:ska/image {"mode":"icon","svg":"\u003csvg data-svg-width=\u002224\u0022 data-svg-height=\u002224\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\u003cpath fill-rule=\u0022evenodd\u0022 clip-rule=\u0022evenodd\u0022 d=\u0022M11.4697 7.71967C11.7626 7.42678 12.2374 7.42678 12.5303 7.71967L20.0303 15.2197C20.3232 15.5126 20.3232 15.9874 20.0303 16.2803C19.7374 16.5732 19.2626 16.5732 18.9697 16.2803L12 9.31066L5.03033 16.2803C4.73744 16.5732 4.26256 16.5732 3.96967 16.2803C3.67678 15.9874 3.67678 15.5126 3.96967 15.2197L11.4697 7.71967Z\u0022 fill=\u0022currentColor\u0022/\u003e\n\u003c/svg\u003e\n","collection":"heroicons","icon":"24/solid/chevron-up","skaBlocks":{"cx":"","t":1709756495,"css":""},"skaBlocksAttributes":{"record":{"aria-hidden":"true"}},"className":"icon"} -->
<div role="figure" aria-hidden="true" class="wp-block-ska-image icon"><svg data-svg-width="24" data-svg-height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4697 7.71967C11.7626 7.42678 12.2374 7.42678 12.5303 7.71967L20.0303 15.2197C20.3232 15.5126 20.3232 15.9874 20.0303 16.2803C19.7374 16.5732 19.2626 16.5732 18.9697 16.2803L12 9.31066L5.03033 16.2803C4.73744 16.5732 4.26256 16.5732 3.96967 16.2803C3.67678 15.9874 3.67678 15.5126 3.96967 15.2197L11.4697 7.71967Z" fill="currentColor"></path>
</svg></div>
<!-- /wp:ska/image --></button>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-bind":"content","x-cloak":""}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<div x-bind="content" x-cloak="" class="wp-block-ska-element"><!-- wp:ska/element -->
<div class="wp-block-ska-element"><!-- wp:paragraph {"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<p>In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element -->Styled accordion
Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.
<!-- wp:ska/element {"metadata":{"name":"Accordion"},"skaBlocksMargin":{"v":{"$":{"@":"","x":"auto"}},"t":"axis"},"skaBlocksSpaceBetween":{"v":{"$":{"@":"","y":"4"}}},"skaBlocksWidth":{"v":{"$":{"@":"full"}}},"skaBlocksMaxWidth":{"v":{"$":{"@":"3xl"}}},"skaBlocksMinHeight":{"v":{"$":{"@":"[16rem]"}},"a":["[16rem]"]},"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-data":"skaAccordion({exclusive: true})"}},"skaBlocks":{"cx":"[\u0026_[x-bind=toggle]]:*:flex [\u0026_[x-bind=toggle]]:*:justify-between [\u0026_[x-bind=toggle]]:*:items-center [\u0026_[x-bind=toggle]]:*:px-6 [\u0026_[x-bind=toggle]]:*:py-4 *:[\u0026_[x-bind=content]]:*:px-6 *:[\u0026_[x-bind=content]]:*:pb-4 mx-auto space-y-4 w-full [\u0026_[x-bind=toggle]]:*:w-full [\u0026_.icon]:[\u0026_[x-bind=toggle]]:*:w-5 max-w-3xl [\u0026_.icon]:[\u0026_[x-bind=toggle]]:*:h-auto min-h-[16rem] [\u0026_[x-bind=toggle]]:*:text-xl [\u0026_[x-bind=toggle]]:*:font-bold [\u0026_.icon]:[\u0026_[x-bind=toggle]]:*:text-current *:bg-white *:rounded-lg *:border *:shadow [\u0026_.icon]:[\u0026_[x-bind=toggle]]:*:transition-transform [\u0026_.icon]:[\u0026.active]:*:-rotate-180","t":1709756495,"css":".mx-auto{margin-left:auto;margin-right:auto}.min-h-\\[16rem\\]{min-height:16rem}.w-full{width:100%}.max-w-3xl{max-width:50rem}.space-y-4 \u003e :not([hidden]) ~ :not([hidden]){\u002d\u002dtw-space-y-reverse:0;margin-top:calc(var(\u002d\u002dska-spacing-4) * calc(1 - var(\u002d\u002dtw-space-y-reverse)));margin-bottom:calc(var(\u002d\u002dska-spacing-4) * var(\u002d\u002dtw-space-y-reverse))}.\\*\\:rounded-lg \u003e *{border-radius:var(\u002d\u002dska-border-radius-lg)}.\\*\\:border \u003e *{border-width:1px}.\\*\\:bg-white \u003e *{\u002d\u002dtw-bg-opacity:1;background-color:rgba(var(\u002d\u002dska-rgb-white),1)}.\\*\\:shadow \u003e *{\u002d\u002dtw-shadow:0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);\u002d\u002dtw-shadow-colored:0 1px 3px 0 var(\u002d\u002dtw-shadow-color),0 1px 2px -1px var(\u002d\u002dtw-shadow-color);box-shadow:var(\u002d\u002dtw-ring-offset-shadow,0 0 #0000),var(\u002d\u002dtw-ring-shadow,0 0 #0000),var(\u002d\u002dtw-shadow)}.\\[\\\u0026_\\.icon\\]\\:\\[\\\u0026\\.active\\]\\:\\*\\:-rotate-180 \u003e *.active .icon{\u002d\u002dtw-rotate:-180deg;transform:translate(var(\u002d\u002dtw-translate-x),var(\u002d\u002dtw-translate-y)) rotate(var(\u002d\u002dtw-rotate)) skewX(var(\u002d\u002dtw-skew-x)) skewY(var(\u002d\u002dtw-skew-y)) scaleX(var(\u002d\u002dtw-scale-x)) scaleY(var(\u002d\u002dtw-scale-y))}.\\*\\:\\[\\\u0026_\\[x-bind\\=content\\]\\]\\:\\*\\:px-6 \u003e * [x-bind=content] \u003e *{padding-left:var(\u002d\u002dska-spacing-6);padding-right:var(\u002d\u002dska-spacing-6)}.\\*\\:\\[\\\u0026_\\[x-bind\\=content\\]\\]\\:\\*\\:pb-4 \u003e * [x-bind=content] \u003e *{padding-bottom:var(\u002d\u002dska-spacing-4)}.\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:flex \u003e * [x-bind=toggle]{display:flex}.\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:w-full \u003e * [x-bind=toggle]{width:100%}.\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:items-center \u003e * [x-bind=toggle]{align-items:center}.\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:justify-between \u003e * [x-bind=toggle]{justify-content:space-between}.\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:px-6 \u003e * [x-bind=toggle]{padding-left:var(\u002d\u002dska-spacing-6);padding-right:var(\u002d\u002dska-spacing-6)}.\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:py-4 \u003e * [x-bind=toggle]{padding-top:var(\u002d\u002dska-spacing-4);padding-bottom:var(\u002d\u002dska-spacing-4)}.\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:text-xl \u003e * [x-bind=toggle]{font-size:var(\u002d\u002dska-font-size-xl);line-height:var(\u002d\u002dska-font-size-xl-lh)}.\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:font-bold \u003e * [x-bind=toggle]{font-weight:var(\u002d\u002dska-font-weight-bold)}.\\[\\\u0026_\\.icon\\]\\:\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:h-auto \u003e * [x-bind=toggle] .icon{height:auto}.\\[\\\u0026_\\.icon\\]\\:\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:w-5 \u003e * [x-bind=toggle] .icon{width:var(\u002d\u002dska-spacing-5)}.\\[\\\u0026_\\.icon\\]\\:\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:text-current \u003e * [x-bind=toggle] .icon{color:currentColor}.\\[\\\u0026_\\.icon\\]\\:\\[\\\u0026_\\[x-bind\\=toggle\\]\\]\\:\\*\\:transition-transform \u003e * [x-bind=toggle] .icon{transition-property:transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}"},"skaBlocksSelectors":{"*":{"skaBlocksBackgroundColor":{"v":{"$":{"@":"white"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"lg"}}},"skaBlocksBoxShadow":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksSelectors":{"[\u0026_[x-bind=toggle]]":{"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksJustifyContent":{"v":{"$":{"@":"between"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocksPadding":{"v":{"$":{"@":"","x":"6","y":"4"}},"t":"axis"},"skaBlocksWidth":{"v":{"$":{"@":"full"}}},"skaBlocksFontSize":{"v":{"$":{"@":"xl"}}},"skaBlocksFontWeight":{"v":{"$":{"@":"bold"}}},"skaBlocksSelectors":{"[\u0026_.icon]":{"skaBlocksWidth":{"v":{"$":{"@":"5"}}},"skaBlocksHeight":{"v":{"$":{"@":"auto"}}},"skaBlocksTextColor":{"v":{"$":{"@":"current"}}},"skaBlocksSelectors":[],"skaBlocksTransitionProperty":{"v":{"$":{"@":"transform"}}}}}},"[\u0026_[x-bind=content]]":{"skaBlocksSelectors":{"*":{"skaBlocksPadding":{"v":{"$":{"@":"","x":"6","b":"4"}},"t":"sides"}}}},"[\u0026.active]":{"skaBlocksSelectors":{"[\u0026_.icon]":{"skaBlocksRotate":{"v":{"$":{"@":"-180"}}}}}}},"skaBlocksBorderWidth":{"v":{"$":{"@":"DEFAULT"}}}}}} -->
<div x-data="skaAccordion({exclusive: true})" class="[&_[x-bind=toggle]]:*:flex [&_[x-bind=toggle]]:*:justify-between [&_[x-bind=toggle]]:*:items-center [&_[x-bind=toggle]]:*:px-6 [&_[x-bind=toggle]]:*:py-4 *:[&_[x-bind=content]]:*:px-6 *:[&_[x-bind=content]]:*:pb-4 mx-auto space-y-4 w-full [&_[x-bind=toggle]]:*:w-full [&_.icon]:[&_[x-bind=toggle]]:*:w-5 max-w-3xl [&_.icon]:[&_[x-bind=toggle]]:*:h-auto min-h-[16rem] [&_[x-bind=toggle]]:*:text-xl [&_[x-bind=toggle]]:*:font-bold [&_.icon]:[&_[x-bind=toggle]]:*:text-current *:bg-white *:rounded-lg *:border *:shadow [&_.icon]:[&_[x-bind=toggle]]:*:transition-transform [&_.icon]:[&.active]:*:-rotate-180 wp-block-ska-element"><!-- wp:ska/element {"className":"active","skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-bind":"item"}},"skaBlocks":{"cx":"","t":1709756495,"css":""}} -->
<div x-bind="item" class="wp-block-ska-element active"><!-- wp:ska/element {"skaBlocksAs":{"href":"#","opensInNewTab":false,"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"toggle"}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<button x-bind="toggle" class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocks":{"cx":"","t":0}} -->
<span class="wp-block-ska-text ska-text">Question #1</span>
<!-- /wp:ska/text -->
<!-- wp:ska/image {"mode":"icon","svg":"\u003csvg data-svg-width=\u002224\u0022 data-svg-height=\u002224\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\u003cpath fill-rule=\u0022evenodd\u0022 clip-rule=\u0022evenodd\u0022 d=\u0022M11.4697 7.71967C11.7626 7.42678 12.2374 7.42678 12.5303 7.71967L20.0303 15.2197C20.3232 15.5126 20.3232 15.9874 20.0303 16.2803C19.7374 16.5732 19.2626 16.5732 18.9697 16.2803L12 9.31066L5.03033 16.2803C4.73744 16.5732 4.26256 16.5732 3.96967 16.2803C3.67678 15.9874 3.67678 15.5126 3.96967 15.2197L11.4697 7.71967Z\u0022 fill=\u0022currentColor\u0022/\u003e\n\u003c/svg\u003e\n","collection":"heroicons","icon":"24/solid/chevron-up","skaBlocks":{"cx":"","t":1709756495,"css":""},"skaBlocksAttributes":{"record":{"aria-hidden":"true"}},"className":"icon"} -->
<div role="figure" aria-hidden="true" class="wp-block-ska-image icon"><svg data-svg-width="24" data-svg-height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4697 7.71967C11.7626 7.42678 12.2374 7.42678 12.5303 7.71967L20.0303 15.2197C20.3232 15.5126 20.3232 15.9874 20.0303 16.2803C19.7374 16.5732 19.2626 16.5732 18.9697 16.2803L12 9.31066L5.03033 16.2803C4.73744 16.5732 4.26256 16.5732 3.96967 16.2803C3.67678 15.9874 3.67678 15.5126 3.96967 15.2197L11.4697 7.71967Z" fill="currentColor"></path>
</svg></div>
<!-- /wp:ska/image --></button>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"skaBlocksAppender":{"type":"hidden"},"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-bind":"content","x-cloak":""}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<div x-bind="content" x-cloak="" class="wp-block-ska-element"><!-- wp:ska/element -->
<div class="wp-block-ska-element"><!-- wp:paragraph {"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-bind":"item"}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<div x-bind="item" class="wp-block-ska-element"><!-- wp:ska/element {"skaBlocksAs":{"href":"#","opensInNewTab":false,"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"toggle"}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<button x-bind="toggle" class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocks":{"cx":"","t":0}} -->
<span class="wp-block-ska-text ska-text">Question #2</span>
<!-- /wp:ska/text -->
<!-- wp:ska/image {"mode":"icon","svg":"\u003csvg data-svg-width=\u002224\u0022 data-svg-height=\u002224\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\u003cpath fill-rule=\u0022evenodd\u0022 clip-rule=\u0022evenodd\u0022 d=\u0022M11.4697 7.71967C11.7626 7.42678 12.2374 7.42678 12.5303 7.71967L20.0303 15.2197C20.3232 15.5126 20.3232 15.9874 20.0303 16.2803C19.7374 16.5732 19.2626 16.5732 18.9697 16.2803L12 9.31066L5.03033 16.2803C4.73744 16.5732 4.26256 16.5732 3.96967 16.2803C3.67678 15.9874 3.67678 15.5126 3.96967 15.2197L11.4697 7.71967Z\u0022 fill=\u0022currentColor\u0022/\u003e\n\u003c/svg\u003e\n","collection":"heroicons","icon":"24/solid/chevron-up","skaBlocks":{"cx":"","t":1709756495,"css":""},"skaBlocksAttributes":{"record":{"aria-hidden":"true"}},"className":"icon"} -->
<div role="figure" aria-hidden="true" class="wp-block-ska-image icon"><svg data-svg-width="24" data-svg-height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4697 7.71967C11.7626 7.42678 12.2374 7.42678 12.5303 7.71967L20.0303 15.2197C20.3232 15.5126 20.3232 15.9874 20.0303 16.2803C19.7374 16.5732 19.2626 16.5732 18.9697 16.2803L12 9.31066L5.03033 16.2803C4.73744 16.5732 4.26256 16.5732 3.96967 16.2803C3.67678 15.9874 3.67678 15.5126 3.96967 15.2197L11.4697 7.71967Z" fill="currentColor"></path>
</svg></div>
<!-- /wp:ska/image --></button>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"skaBlocksAppender":{"type":"hidden"},"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-bind":"content","x-cloak":""}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<div x-bind="content" x-cloak="" class="wp-block-ska-element"><!-- wp:ska/element -->
<div class="wp-block-ska-element"><!-- wp:paragraph {"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-bind":"item"}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<div x-bind="item" class="wp-block-ska-element"><!-- wp:ska/element {"skaBlocksAs":{"href":"#","opensInNewTab":false,"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"x-bind":"toggle"}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<button x-bind="toggle" class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocks":{"cx":"","t":0}} -->
<span class="wp-block-ska-text ska-text">Question #3</span>
<!-- /wp:ska/text -->
<!-- wp:ska/image {"mode":"icon","svg":"\u003csvg data-svg-width=\u002224\u0022 data-svg-height=\u002224\u0022 viewBox=\u00220 0 24 24\u0022 fill=\u0022none\u0022 xmlns=\u0022http://www.w3.org/2000/svg\u0022\u003e\n\u003cpath fill-rule=\u0022evenodd\u0022 clip-rule=\u0022evenodd\u0022 d=\u0022M11.4697 7.71967C11.7626 7.42678 12.2374 7.42678 12.5303 7.71967L20.0303 15.2197C20.3232 15.5126 20.3232 15.9874 20.0303 16.2803C19.7374 16.5732 19.2626 16.5732 18.9697 16.2803L12 9.31066L5.03033 16.2803C4.73744 16.5732 4.26256 16.5732 3.96967 16.2803C3.67678 15.9874 3.67678 15.5126 3.96967 15.2197L11.4697 7.71967Z\u0022 fill=\u0022currentColor\u0022/\u003e\n\u003c/svg\u003e\n","collection":"heroicons","icon":"24/solid/chevron-up","skaBlocks":{"cx":"","t":1709756495,"css":""},"skaBlocksAttributes":{"record":{"aria-hidden":"true"}},"className":"icon"} -->
<div role="figure" aria-hidden="true" class="wp-block-ska-image icon"><svg data-svg-width="24" data-svg-height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.4697 7.71967C11.7626 7.42678 12.2374 7.42678 12.5303 7.71967L20.0303 15.2197C20.3232 15.5126 20.3232 15.9874 20.0303 16.2803C19.7374 16.5732 19.2626 16.5732 18.9697 16.2803L12 9.31066L5.03033 16.2803C4.73744 16.5732 4.26256 16.5732 3.96967 16.2803C3.67678 15.9874 3.67678 15.5126 3.96967 15.2197L11.4697 7.71967Z" fill="currentColor"></path>
</svg></div>
<!-- /wp:ska/image --></button>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"skaBlocksAppender":{"type":"hidden"},"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-bind":"content","x-cloak":""}},"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<div x-bind="content" x-cloak="" class="wp-block-ska-element"><!-- wp:ska/element -->
<div class="wp-block-ska-element"><!-- wp:paragraph {"skaBlocks":{"cx":"","t":1705888686,"css":""}} -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element -->Styled accordion 2
Ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.
Amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.
Consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.
Consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.
Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.
<!-- wp:ska/element {"metadata":{"name":"Accordion"},"skaBlocksOverflow":{"v":{"$":{"@":"hidden"}}},"skaBlocksBorderRadius":{"v":{"$":{"@":"md"}}},"skaBlocksBorderWidth":{"v":{"$":{"@":"DEFAULT"}}},"skaBlocksBoxShadow":{"v":{"$":{"@":"sm"}}},"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-data":"skaAccordion({exclusive: true, transitionDuration: 600})"}},"skaBlocks":{"cx":"[\u0026\u003e[x-bind=toggle]]:[\u0026\u003e[x-bind=item]]:flex overflow-hidden [\u0026\u003e[x-bind=toggle]]:[\u0026\u003e[x-bind=item]]:justify-between [\u0026\u003e[x-bind=toggle]]:[\u0026\u003e[x-bind=item]]:items-center [\u0026\u003e[x-bind=toggle]]:[\u0026\u003e[x-bind=item]]:p-4 *:[\u0026\u003e[x-bind=content]]:[\u0026\u003e[x-bind=item]]:p-4 [\u0026\u003e[x-bind=toggle]]:[\u0026\u003e[x-bind=item]]:w-full [\u0026\u003e.icon]:[\u0026\u003e[x-bind=toggle]]:[\u0026\u003e[x-bind=item]]:size-6 *:[\u0026\u003e[x-bind=content]]:[\u0026\u003e[x-bind=item]]:text-sm [\u0026\u003e[x-bind=toggle]]:[\u0026\u003e[x-bind=item]]:text-site-subtext focus:[\u0026\u003e[x-bind=toggle]]:[\u0026\u003e[x-bind=item]]:text-primary *:[\u0026\u003e[x-bind=content]]:[\u0026\u003e[x-bind=item]]:text-site-muted *:[\u0026\u003e[x-bind=content]]:[\u0026\u003e[x-bind=item]]:bg-gray-50 rounded-md border [\u0026\u003e[x-bind=item]]:border-b last:[\u0026\u003e[x-bind=item]]:border-b-0 *:[\u0026\u003e[x-bind=content]]:[\u0026\u003e[x-bind=item]]:border-t focus:[\u0026\u003e[x-bind=toggle]]:[\u0026\u003e[x-bind=item]]:outline-none shadow-sm [\u0026\u003e.icon]:[\u0026\u003e[x-bind=toggle]]:[\u0026\u003e[x-bind=item]]:transition-transform [\u0026.active_.icon]:[\u0026\u003e[x-bind=item]]:rotate-45 editor:[\u0026\u003e[x-bind=toggle]]:[\u0026\u003e[x-bind=item]]:cursor-auto","t":1709756495,"css":".overflow-hidden{overflow:hidden}.rounded-md{border-radius:var(\u002d\u002dska-border-radius-md)}.border{border-width:1px}.shadow-sm{\u002d\u002dtw-shadow:0 1px 2px 0 rgb(0 0 0/0.05);\u002d\u002dtw-shadow-colored:0 1px 2px 0 var(\u002d\u002dtw-shadow-color);box-shadow:var(\u002d\u002dtw-ring-offset-shadow,0 0 #0000),var(\u002d\u002dtw-ring-shadow,0 0 #0000),var(\u002d\u002dtw-shadow)}.\\[\\\u0026\\\u003e\\[x-bind\\=item\\]\\]\\:border-b\u003e[x-bind=item]{border-bottom-width:1px}.last\\:\\[\\\u0026\\\u003e\\[x-bind\\=item\\]\\]\\:border-b-0\u003e[x-bind=item]:last-child{border-bottom-width:0px}.\\[\\\u0026\\.active_\\.icon\\]\\:\\[\\\u0026\\\u003e\\[x-bind\\=item\\]\\]\\:rotate-45\u003e[x-bind=item].active .icon{\u002d\u002dtw-rotate:45deg;transform:translate(var(\u002d\u002dtw-translate-x),var(\u002d\u002dtw-translate-y)) rotate(var(\u002d\u002dtw-rotate)) skewX(var(\u002d\u002dtw-skew-x)) skewY(var(\u002d\u002dtw-skew-y)) scaleX(var(\u002d\u002dtw-scale-x)) scaleY(var(\u002d\u002dtw-scale-y))}.\\*\\:\\[\\\u0026\\\u003e\\[x-bind\\=content\\]\\]\\:\\[\\\u0026\\\u003e\\[x-bind\\=item\\]\\]\\:border-t\u003e[x-bind=item]\u003e[x-bind=content] \u003e *{border-top-width:1px}.\\*\\:\\[\\\u0026\\\u003e\\[x-bind\\=content\\]\\]\\:\\[\\\u0026\\\u003e\\[x-bind\\=item\\]\\]\\:bg-gray-50\u003e[x-bind=item]\u003e[x-bind=content] \u003e *{\u002d\u002dtw-bg-opacity:1;background-color:rgba(249,250,251,1)}.\\*\\:\\[\\\u0026\\\u003e\\[x-bind\\=content\\]\\]\\:\\[\\\u0026\\\u003e\\[x-bind\\=item\\]\\]\\:p-4\u003e[x-bind=item]\u003e[x-bind=content] \u003e *{padding:var(\u002d\u002dska-spacing-4)}.\\*\\:\\[\\\u0026\\\u003e\\[x-bind\\=content\\]\\]\\:\\[\\\u0026\\\u003e\\[x-bind\\=item\\]\\]\\:text-sm\u003e[x-bind=item]\u003e[x-bind=content] \u003e *{font-size:var(\u002d\u002dska-font-size-sm);line-height:var(\u002d\u002dska-font-size-sm-lh)}.\\*\\:\\[\\\u0026\\\u003e\\[x-bind\\=content\\]\\]\\:\\[\\\u0026\\\u003e\\[x-bind\\=item\\]\\]\\:text-site-muted\u003e[x-bind=item]\u003e[x-bind=content] \u003e *{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site-muted),0.7)}.\\[\\\u0026\\\u003e\\[x-bind\\=toggle\\]\\]\\:\\[\\\u0026\\\u003e\\[x-bind\\=item\\]\\]\\:flex\u003e[x-bind=item]\u003e[x-bind=toggle]{display:flex}.\\[\\\u0026\\\u003e\\[x-bind\\=toggle\\]\\]\\:\\[\\\u0026\\\u003e\\[x-bind\\=item\\]\\]\\:w-full\u003e[x-bind=item]\u003e[x-bind=toggle]{width:100%}.\\[\\\u0026\\\u003e\\[x-bind\\=toggle\\]\\]\\:\\[\\\u0026\\\u003e\\[x-bind\\=item\\]\\]\\:items-center\u003e[x-bind=item]\u003e[x-bind=toggle]{align-items:center}.\\[\\\u0026\\\u003e\\[x-bind\\=toggle\\]\\]\\:\\[\\\u0026\\\u003e\\[x-bind\\=item\\]\\]\\:justify-between\u003e[x-bind=item]\u003e[x-bind=toggle]{justify-content:space-between}.\\[\\\u0026\\\u003e\\[x-bind\\=toggle\\]\\]\\:\\[\\\u0026\\\u003e\\[x-bind\\=item\\]\\]\\:p-4\u003e[x-bind=item]\u003e[x-bind=toggle]{padding:var(\u002d\u002dska-spacing-4)}.\\[\\\u0026\\\u003e\\[x-bind\\=toggle\\]\\]\\:\\[\\\u0026\\\u003e\\[x-bind\\=item\\]\\]\\:text-site-subtext\u003e[x-bind=item]\u003e[x-bind=toggle]{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-site-subtext),1)}.focus\\:\\[\\\u0026\\\u003e\\[x-bind\\=toggle\\]\\]\\:\\[\\\u0026\\\u003e\\[x-bind\\=item\\]\\]\\:text-primary\u003e[x-bind=item]\u003e[x-bind=toggle]:focus{\u002d\u002dtw-text-opacity:1;color:rgba(var(\u002d\u002dska-rgb-primary),1)}.focus\\:\\[\\\u0026\\\u003e\\[x-bind\\=toggle\\]\\]\\:\\[\\\u0026\\\u003e\\[x-bind\\=item\\]\\]\\:outline-none\u003e[x-bind=item]\u003e[x-bind=toggle]:focus{outline:2px solid transparent;outline-offset:2px}:is(.is-root-container):not(#_) .editor\\:\\[\\\u0026\\\u003e\\[x-bind\\=toggle\\]\\]\\:\\[\\\u0026\\\u003e\\[x-bind\\=item\\]\\]\\:cursor-auto\u003e[x-bind=item]\u003e[x-bind=toggle]{cursor:auto}.\\[\\\u0026\\\u003e\\.icon\\]\\:\\[\\\u0026\\\u003e\\[x-bind\\=toggle\\]\\]\\:\\[\\\u0026\\\u003e\\[x-bind\\=item\\]\\]\\:size-6\u003e[x-bind=item]\u003e[x-bind=toggle]\u003e.icon{width:var(\u002d\u002dska-spacing-6);height:var(\u002d\u002dska-spacing-6)}.\\[\\\u0026\\\u003e\\.icon\\]\\:\\[\\\u0026\\\u003e\\[x-bind\\=toggle\\]\\]\\:\\[\\\u0026\\\u003e\\[x-bind\\=item\\]\\]\\:transition-transform\u003e[x-bind=item]\u003e[x-bind=toggle]\u003e.icon{transition-property:transform;transition-timing-function:cubic-bezier(0.4,0,0.2,1);transition-duration:150ms}"},"skaBlocksSelectors":{"[\u0026\u003e[x-bind=item]]":{"skaBlocksSelectors":{"[\u0026\u003e[x-bind=toggle]]":{"skaBlocksSelectors":{"[\u0026\u003e.icon]":{"skaBlocksSelectors":[],"skaBlocksSize":{"v":{"$":{"@":"6"}}},"skaBlocksTransitionProperty":{"v":{"$":{"@":"transform"}}}}},"skaBlocksDisplay":{"v":{"$":{"@":"flex"}}},"skaBlocksJustifyContent":{"v":{"$":{"@":"between"}}},"skaBlocksAlignItems":{"v":{"$":{"@":"center"}}},"skaBlocksPadding":{"v":{"$":{"@":"4"}}},"skaBlocksWidth":{"v":{"$":{"@":"full"}}},"skaBlocksTextColor":{"v":{"$":{"@":"site-subtext"},"focus":{"@":"primary"}}},"skaBlocksOutlineStyle":{"v":{"$":{"@":""},"focus":{"@":"none"}}},"skaBlocksCursor":{"v":{"$":{"@":""},"editor":{"@":"auto"}}}},"[\u0026\u003e[x-bind=content]]":{"skaBlocksSelectors":{"*":{"skaBlocksPadding":{"v":{"$":{"@":"4"}}},"skaBlocksFontSize":{"v":{"$":{"@":"sm"}}},"skaBlocksTextColor":{"v":{"$":{"@":"site-muted"}}},"skaBlocksBackgroundColor":{"v":{"$":{"@":"gray-50"}}},"skaBlocksBorderWidth":{"v":{"$":{"@":"","t":"DEFAULT"}},"t":"sides"}}}}},"skaBlocksBorderWidth":{"v":{"$":{"@":"","b":"DEFAULT"},"last":{"b":"0"}},"t":"sides"},"skaBlocksRotate":{"v":{"$":{"@":""},"[\u0026.active_.icon]":{"@":"45"}}}}}} -->
<div x-data="skaAccordion({exclusive: true, transitionDuration: 600})" class="[&>[x-bind=toggle]]:[&>[x-bind=item]]:flex overflow-hidden [&>[x-bind=toggle]]:[&>[x-bind=item]]:justify-between [&>[x-bind=toggle]]:[&>[x-bind=item]]:items-center [&>[x-bind=toggle]]:[&>[x-bind=item]]:p-4 *:[&>[x-bind=content]]:[&>[x-bind=item]]:p-4 [&>[x-bind=toggle]]:[&>[x-bind=item]]:w-full [&>.icon]:[&>[x-bind=toggle]]:[&>[x-bind=item]]:size-6 *:[&>[x-bind=content]]:[&>[x-bind=item]]:text-sm [&>[x-bind=toggle]]:[&>[x-bind=item]]:text-site-subtext focus:[&>[x-bind=toggle]]:[&>[x-bind=item]]:text-primary *:[&>[x-bind=content]]:[&>[x-bind=item]]:text-site-muted *:[&>[x-bind=content]]:[&>[x-bind=item]]:bg-gray-50 rounded-md border [&>[x-bind=item]]:border-b last:[&>[x-bind=item]]:border-b-0 *:[&>[x-bind=content]]:[&>[x-bind=item]]:border-t focus:[&>[x-bind=toggle]]:[&>[x-bind=item]]:outline-none shadow-sm [&>.icon]:[&>[x-bind=toggle]]:[&>[x-bind=item]]:transition-transform [&.active_.icon]:[&>[x-bind=item]]:rotate-45 editor:[&>[x-bind=toggle]]:[&>[x-bind=item]]:cursor-auto wp-block-ska-element"><!-- wp:ska/element {"metadata":{"name":"Item"},"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-bind":"item"}},"skaBlocks":{"cx":"","t":1711445320,"css":""},"skaBlocksSelectors":[]} -->
<div x-bind="item" class="wp-block-ska-element"><!-- wp:ska/element {"metadata":{"name":"Toggle"},"skaBlocksAs":{"href":"#","opensInNewTab":false,"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"type":"button","x-bind":"toggle"}},"skaBlocks":{"cx":"","t":1711445320,"css":""},"skaBlocksSelectors":[]} -->
<button type="button" x-bind="toggle" class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocks":{"cx":"","t":0}} -->
<span class="wp-block-ska-text ska-text">Question #1</span>
<!-- /wp:ska/text -->
<!-- wp:ska/image {"mode":"svg","svg":"\u003csvg xmlns=\u0022http://www.w3.org/2000/svg\u0022 fill=\u0022none\u0022 viewBox=\u00220 0 24 24\u0022 stroke-width=\u00221.5\u0022 stroke=\u0022currentColor\u0022\u003e\n\t\u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 d=\u0022M12 4.5v15m7.5-7.5h-15\u0022\u003e\u003c/path\u003e\n\u003c/svg\u003e","wrap":false,"skaBlocks":{"cx":"","t":1709756495,"css":""},"skaBlocksSelectors":[],"className":"icon"} -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="wp-block-ska-image icon" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg>
<!-- /wp:ska/image --></button>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"metadata":{"name":"Content wrapper"},"skaBlocksAttributes":{"record":{"x-cloak":"","x-bind":"content"}},"skaBlocks":{"cx":"","t":1711445320,"css":""},"skaBlocksSelectors":[]} -->
<div x-cloak="" x-bind="content" class="wp-block-ska-element"><!-- wp:ska/element {"metadata":{"name":"Content"}} -->
<div class="wp-block-ska-element"><!-- wp:paragraph -->
<p>Ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"metadata":{"name":"Item"},"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-bind":"item"}},"skaBlocks":{"cx":"","t":1711445320,"css":""},"skaBlocksSelectors":[]} -->
<div x-bind="item" class="wp-block-ska-element"><!-- wp:ska/element {"metadata":{"name":"Toggle"},"skaBlocksAs":{"href":"#","opensInNewTab":false,"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"type":"button","x-bind":"toggle"}},"skaBlocks":{"cx":"","t":1711445320,"css":""},"skaBlocksSelectors":[]} -->
<button type="button" x-bind="toggle" class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocks":{"cx":"","t":0}} -->
<span class="wp-block-ska-text ska-text">Question #2</span>
<!-- /wp:ska/text -->
<!-- wp:ska/image {"mode":"svg","svg":"\u003csvg xmlns=\u0022http://www.w3.org/2000/svg\u0022 fill=\u0022none\u0022 viewBox=\u00220 0 24 24\u0022 stroke-width=\u00221.5\u0022 stroke=\u0022currentColor\u0022\u003e\n\t\u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 d=\u0022M12 4.5v15m7.5-7.5h-15\u0022\u003e\u003c/path\u003e\n\u003c/svg\u003e","wrap":false,"skaBlocks":{"cx":"","t":1709756495,"css":""},"skaBlocksSelectors":[],"className":"icon"} -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="wp-block-ska-image icon" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg>
<!-- /wp:ska/image --></button>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"metadata":{"name":"Content wrapper"},"skaBlocksAttributes":{"record":{"x-cloak":"","x-bind":"content"}},"skaBlocks":{"cx":"","t":1711445320,"css":""},"skaBlocksSelectors":[]} -->
<div x-cloak="" x-bind="content" class="wp-block-ska-element"><!-- wp:ska/element {"metadata":{"name":"Content"}} -->
<div class="wp-block-ska-element"><!-- wp:paragraph -->
<p>Amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"metadata":{"name":"Item"},"skaBlocksAs":{"element":"div"},"skaBlocksAttributes":{"record":{"x-bind":"item"}},"skaBlocks":{"cx":"","t":1711445320,"css":""},"skaBlocksSelectors":[]} -->
<div x-bind="item" class="wp-block-ska-element"><!-- wp:ska/element {"metadata":{"name":"Toggle"},"skaBlocksAs":{"href":"#","opensInNewTab":false,"element":"custom","customElement":"button"},"skaBlocksAttributes":{"record":{"type":"button","x-bind":"toggle"}},"skaBlocks":{"cx":"","t":1711445320,"css":""},"skaBlocksSelectors":[]} -->
<button type="button" x-bind="toggle" class="wp-block-ska-element"><!-- wp:ska/text {"skaBlocks":{"cx":"","t":0}} -->
<span class="wp-block-ska-text ska-text">Question #3</span>
<!-- /wp:ska/text -->
<!-- wp:ska/image {"mode":"svg","svg":"\u003csvg xmlns=\u0022http://www.w3.org/2000/svg\u0022 fill=\u0022none\u0022 viewBox=\u00220 0 24 24\u0022 stroke-width=\u00221.5\u0022 stroke=\u0022currentColor\u0022\u003e\n\t\u003cpath stroke-linecap=\u0022round\u0022 stroke-linejoin=\u0022round\u0022 d=\u0022M12 4.5v15m7.5-7.5h-15\u0022\u003e\u003c/path\u003e\n\u003c/svg\u003e","wrap":false,"skaBlocks":{"cx":"","t":1709756495,"css":""},"skaBlocksSelectors":[],"className":"icon"} -->
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="wp-block-ska-image icon" aria-hidden="true">
<path stroke-linecap="round" stroke-linejoin="round" d="M12 4.5v15m7.5-7.5h-15"></path>
</svg>
<!-- /wp:ska/image --></button>
<!-- /wp:ska/element -->
<!-- wp:ska/element {"metadata":{"name":"Content wrapper"},"skaBlocksAttributes":{"record":{"x-cloak":"","x-bind":"content"}},"skaBlocks":{"cx":"","t":1711445320,"css":""},"skaBlocksSelectors":[]} -->
<div x-cloak="" x-bind="content" class="wp-block-ska-element"><!-- wp:ska/element {"metadata":{"name":"Content"}} -->
<div class="wp-block-ska-element"><!-- wp:paragraph -->
<p>Consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.</p>
<!-- /wp:paragraph --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element --></div>
<!-- /wp:ska/element -->Details/Summary
WordPress also comes with the Details block which produces a simple accordion-like behavior without additional JavaScript.
Question #1
Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex.
Illo neque iste repellendus modi, quasi ipsa commodi saepe?
Provident ipsa nulla earum.
Question #2
Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.
Question #3
Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.
<!-- wp:ska/element {"skaBlocksSpaceBetween":{"v":{"$":{"@":"","y":"3.5"}}},"skaBlocksFontSize":{"v":{"$":{"@":"base"}}},"skaBlocksDivideWidth":{"v":{"$":{"@":"","y":"DEFAULT"}}},"skaBlocks":{"cx":"[\u0026_details]:pt-4 first:[\u0026_details]:pt-0 space-y-3.5 text-base [\u0026_summary]:text-lg [\u0026_summary]:font-semibold divide-y","t":1709756495,"css":".space-y-3 \u003e :not([hidden]) ~ :not([hidden]){\u002d\u002dtw-space-y-reverse:0;margin-top:calc(var(\u002d\u002dska-spacing-3) * calc(1 - var(\u002d\u002dtw-space-y-reverse)));margin-bottom:calc(var(\u002d\u002dska-spacing-3) * var(\u002d\u002dtw-space-y-reverse))}.space-y-3\\.5 \u003e :not([hidden]) ~ :not([hidden]){\u002d\u002dtw-space-y-reverse:0;margin-top:calc(var(\u002d\u002dska-spacing-3\\.5) * calc(1 - var(\u002d\u002dtw-space-y-reverse)));margin-bottom:calc(var(\u002d\u002dska-spacing-3\\.5) * var(\u002d\u002dtw-space-y-reverse))}.divide-y \u003e :not([hidden]) ~ :not([hidden]){\u002d\u002dtw-divide-y-reverse:0;border-top-width:calc(1px * calc(1 - var(\u002d\u002dtw-divide-y-reverse)));border-bottom-width:calc(1px * var(\u002d\u002dtw-divide-y-reverse))}.text-base{font-size:var(\u002d\u002dska-font-size-base);line-height:var(\u002d\u002dska-font-size-base-lh)}.\\[\\\u0026_details\\]\\:pt-4 details{padding-top:var(\u002d\u002dska-spacing-4)}.first\\:\\[\\\u0026_details\\]\\:pt-0 details:first-child{padding-top:var(\u002d\u002dska-spacing-0)}.\\[\\\u0026_summary\\]\\:text-lg summary{font-size:var(\u002d\u002dska-font-size-lg);line-height:var(\u002d\u002dska-font-size-lg-lh)}.\\[\\\u0026_summary\\]\\:font-semibold summary{font-weight:var(\u002d\u002dska-font-weight-semibold)}"},"skaBlocksSelectors":{"[\u0026_details]":{"skaBlocksPadding":{"v":{"$":{"@":"","t":"4"},"first":{"t":"0"}},"t":"sides"}},"[\u0026_summary]":{"skaBlocksFontWeight":{"v":{"$":{"@":"semibold"}}},"skaBlocksFontSize":{"v":{"$":{"@":"lg"}}}}}} -->
<div class="[&_details]:pt-4 first:[&_details]:pt-0 space-y-3.5 text-base [&_summary]:text-lg [&_summary]:font-semibold divide-y wp-block-ska-element"><!-- wp:details -->
<details class="wp-block-details"><summary>Question #1</summary><!-- wp:paragraph {"placeholder":"Type / to add a hidden block"} -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex.</p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"placeholder":"Type / to add a hidden block"} -->
<p>Illo neque iste repellendus modi, quasi ipsa commodi saepe? </p>
<!-- /wp:paragraph -->
<!-- wp:paragraph {"placeholder":"Type / to add a hidden block"} -->
<p>Provident ipsa nulla earum.</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details -->
<!-- wp:details -->
<details class="wp-block-details"><summary>Question #2</summary><!-- wp:paragraph {"placeholder":"Type / to add a hidden block"} -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details -->
<!-- wp:details -->
<details class="wp-block-details"><summary>Question #3</summary><!-- wp:paragraph {"placeholder":"Type / to add a hidden block"} -->
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. In magnam quod natus deleniti architecto eaque consequuntur ex, illo neque iste repellendus modi, quasi ipsa commodi saepe? Provident ipsa nulla earum.</p>
<!-- /wp:paragraph --></details>
<!-- /wp:details --></div>
<!-- /wp:ska/element -->