Marsha Docs

Accordion Shortcode

Accordions, if used properly, can be incredibly helpful design pattern for users. Accordions allow administrators to highlight important details of a section and allow the user to reveal more information if they feel they need it.

Accordion Shortcode Parameters

The parameters for the accordion shortcode:

  • Spaced (spaced): If this is set to true, this will apply vertical spacing to the top and bottom of the collection of toggles. Default value is false.
  • RequiredTitle (title): This is just the title that will be displayed while the accordion items is closed. NOTE: Do not include HTML in the title, it will be escaped so that the text will be displayed and the HTML will not be executed. You are free to add HTML to the content of course.

Accordion Shortcode Examples

Default Accordion

Shortcode
HTML
First Toggle Item
Second Toggle Item
[efstoggles]
[efstoggle title="First Toggle Item"]This is our first toggle content.[/efstoggle]
[efstoggle title="Second Toggle Item"]This is our second toggle content.[/efstoggle]
[/efstoggles]
<dl>
    <dd class="accordion mb-4" x-data="{ toggleOpen: false }">
        <div class="flex justify-between text-white bg-green items-center cursor-pointer group" x-on:click="toggleOpen = !toggleOpen">
            <div class="py-4 px-4 text-lg font-semibold tracking-wide">First Toggle Item</div>
                <div class="py-4 px-4">
                    <svg aria-hidden="true" :class="{ 'hidden' : !toggleOpen}" focusable="false" data-prefix="fas" data-icon="minus"  class="text-white hidden h-4 w-4 fill-current" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg>
                    <svg aria-hidden="true" :class="{ 'hidden' : toggleOpen}" focusable="false" data-prefix="fas" data-icon="plus" class="text-white h-4 w-4 fill-current"  role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg>
                </div>
        </div>
        <div class="bg-gray-100 rounded-b text-gray-700 p-4 hidden" :class="{ 'hidden' : !toggleOpen}">
            This is our first toggle content.
        </div>
    </dd>
    <dd class="accordion mb-4" x-data="{ toggleOpen: false }">
        <div class="flex justify-between text-white bg-green items-center cursor-pointer group" x-on:click="toggleOpen = !toggleOpen">
            <div class="py-4 px-4 text-lg font-semibold tracking-wide">Second Toggle Item</div>
                <div class="py-4 px-4">
                    <svg aria-hidden="true" :class="{ 'hidden' : !toggleOpen}" focusable="false" data-prefix="fas" data-icon="minus"  class="text-white hidden h-4 w-4 fill-current" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg>
                    <svg aria-hidden="true" :class="{ 'hidden' : toggleOpen}" focusable="false" data-prefix="fas" data-icon="plus" class="text-white h-4 w-4 fill-current"  role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg>
                </div>
        </div>
        <div class="bg-gray-100 rounded-b text-gray-700 p-4 hidden" :class="{ 'hidden' : !toggleOpen}">
            This is our second toggle content.
        </div>
    </dd>
</dl>
Copy Code to Clipboard
Copy Code to Clipboard

Spaced Accordion

Shortcode
HTML
First Toggle Item
Second Toggle Item
[efstoggles spaced=true]
[efstoggle title="First Toggle Item"]This is our first toggle content.[/efstoggle]
[efstoggle title="Second Toggle Item"]This is our second toggle content.[/efstoggle]
[/efstoggles]
<dl class="my-6">
    <dd class="accordion mb-4" x-data="{ toggleOpen: false }">
    <div class="flex justify-between text-white bg-green items-center cursor-pointer group" x-on:click="toggleOpen = !toggleOpen">
        <div class="py-4 px-4 text-lg font-semibold tracking-wide">First Toggle Item</div>
            <div class="py-4 px-4">
                <svg aria-hidden="true" :class="{ 'hidden' : !toggleOpen}" focusable="false" data-prefix="fas" data-icon="minus"  class="text-white hidden h-4 w-4 fill-current" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg>
                <svg aria-hidden="true" :class="{ 'hidden' : toggleOpen}" focusable="false" data-prefix="fas" data-icon="plus" class="text-white h-4 w-4 fill-current"  role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg>
            </div>
    </div>
    <div class="bg-gray-100 rounded-b text-gray-700 p-4 hidden" :class="{ 'hidden' : !toggleOpen}">
        This is our first toggle content.
    </div>
    </dd>
    <dd class="accordion mb-4" x-data="{ toggleOpen: false }">
    <div class="flex justify-between text-white bg-green items-center cursor-pointer group" x-on:click="toggleOpen = !toggleOpen">
        <div class="py-4 px-4 text-lg font-semibold tracking-wide">Second Toggle Item</div>
            <div class="py-4 px-4">
                <svg aria-hidden="true" :class="{ 'hidden' : !toggleOpen}" focusable="false" data-prefix="fas" data-icon="minus"  class="text-white hidden h-4 w-4 fill-current" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 208H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h384c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg>
                <svg aria-hidden="true" :class="{ 'hidden' : toggleOpen}" focusable="false" data-prefix="fas" data-icon="plus" class="text-white h-4 w-4 fill-current"  role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"></path></svg>
            </div>
    </div>
    <div class="bg-gray-100 rounded-b text-gray-700 p-4 hidden" :class="{ 'hidden' : !toggleOpen}">
        This is our second toggle content.
    </div>
    </dd>
    </dl>
Copy Code to Clipboard
Copy Code to Clipboard