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.
  • ID (id): You can include a unique ID value to the toggle that'll create a link within the page allowing you to directly link to that toggle item. IDs should be unique to the page and only include letters, numbers, dashes, or underscores.

Accordion Shortcode Examples

Default Accordion

Shortcode
HTML
First Toggle Item
Second Toggle Item
[mu_toggles]
[mu_toggle title="First Toggle Item"]This is our first toggle content.[/mu_toggle]
[mu_toggle title="Second Toggle Item"]This is our second toggle content.[/mu_toggle]
[/mu_toggles]
<!-- THIS CODE SHOULD ONLY BE USED OUTSIDE OF WORDPRESS -->
<div>
	<div id="" class="accordion  mb-4" x-data="{ toggleOpen: false }">
		<div class="flex justify-between bg-gray-100 text-gray-800 items-center cursor-pointer group border border-gray-200" x-on:click="toggleOpen = !toggleOpen">
			<div class="accordion-title py-4 px-4 text-base font-semibold tracking-wide">First Toggle Item</div><div class="py-4 px-4">
				<svg :class="{ '-rotate-180': toggleOpen }" class="rotate-0 h-6 w-6 transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
			</div>
		</div>
		<div class="accordion-body bg-white border border-gray-200 border-t-0 rounded-b text-gray-700 px-6 py-6 hidden" :class="{ 'hidden' : !toggleOpen}">
			This is our first toggle content.
		</div>
	</div>
	<div id="" class="accordion  mb-4" x-data="{ toggleOpen: false }">
		<div class="flex justify-between bg-gray-100 text-gray-800 items-center cursor-pointer group border border-gray-200" x-on:click="toggleOpen = !toggleOpen">
			<div class="accordion-title py-4 px-4 text-base font-semibold tracking-wide">Second Toggle Item</div><div class="py-4 px-4">
				<svg :class="{ '-rotate-180': toggleOpen }" class="rotate-0 h-6 w-6 transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
			</div>
		</div>
		<div class="accordion-body bg-white border border-gray-200 border-t-0 rounded-b text-gray-700 px-6 py-6 hidden" :class="{ 'hidden' : !toggleOpen}">
			This is our second toggle content.
		</div>
	</div>
</div>
Copy Code to Clipboard
Copy Code to Clipboard

Default Accordion with ID

Shortcode
HTML
First Toggle Item
Second Toggle Item
[mu_toggles]
[mu_toggle title="First Toggle Item" id="first_toggle"]This is our first toggle content.[/mu_toggle]
[mu_toggle title="Second Toggle Item" id="second_toggle"]This is our second toggle content.[/mu_toggle]
[/mu_toggles]
<!-- THIS CODE SHOULD ONLY BE USED OUTSIDE OF WORDPRESS -->
<div>
	<div id="first_toggle" class="accordion  mb-4" x-data="{ toggleOpen: false }">
		<div class="flex justify-between bg-gray-100 text-gray-800 items-center cursor-pointer group border border-gray-200" x-on:click="toggleOpen = !toggleOpen">
			<div class="accordion-title py-4 px-4 text-base font-semibold tracking-wide">First Toggle Item</div><div class="py-4 px-4">
				<svg :class="{ '-rotate-180': toggleOpen }" class="rotate-0 h-6 w-6 transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
			</div>
		</div>
		<div class="accordion-body bg-white border border-gray-200 border-t-0 rounded-b text-gray-700 px-6 py-6 hidden" :class="{ 'hidden' : !toggleOpen}">
			This is our first toggle content.
		</div>
	</div>
	<div id="second_toggle" class="accordion  mb-4" x-data="{ toggleOpen: false }">
		<div class="flex justify-between bg-gray-100 text-gray-800 items-center cursor-pointer group border border-gray-200" x-on:click="toggleOpen = !toggleOpen">
			<div class="accordion-title py-4 px-4 text-base font-semibold tracking-wide">Second Toggle Item</div><div class="py-4 px-4">
				<svg :class="{ '-rotate-180': toggleOpen }" class="rotate-0 h-6 w-6 transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
			</div>
		</div>
		<div class="accordion-body bg-white border border-gray-200 border-t-0 rounded-b text-gray-700 px-6 py-6 hidden" :class="{ 'hidden' : !toggleOpen}">
			This is our second toggle content.
		</div>
	</div>
</div>
Copy Code to Clipboard
Copy Code to Clipboard

Spaced Accordion

Shortcode
HTML
First Toggle Item
Second Toggle Item
[mu_toggles spaced=true]
[mu_toggle title="First Toggle Item"]This is our first toggle content.[/mu_toggle]
[mu_toggle title="Second Toggle Item"]This is our second toggle content.[/mu_toggle]
[/mu_toggles]
<!-- THIS CODE SHOULD ONLY BE USED OUTSIDE OF WORDPRESS -->
<div class="my-6">
	<div id="first_toggle" class="accordion  mb-4" x-data="{ toggleOpen: false }">
		<div class="flex justify-between bg-gray-100 text-gray-800 items-center cursor-pointer group border border-gray-200" x-on:click="toggleOpen = !toggleOpen">
			<div class="accordion-title py-4 px-4 text-base font-semibold tracking-wide">First Toggle Item</div><div class="py-4 px-4">
				<svg :class="{ '-rotate-180': toggleOpen }" class="rotate-0 h-6 w-6 transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
			</div>
		</div>
		<div class="accordion-body bg-white border border-gray-200 border-t-0 rounded-b text-gray-700 px-6 py-6 hidden" :class="{ 'hidden' : !toggleOpen}">
			This is our first toggle content.
		</div>
	</div>
	<div id="second_toggle" class="accordion  mb-4" x-data="{ toggleOpen: false }">
		<div class="flex justify-between bg-gray-100 text-gray-800 items-center cursor-pointer group border border-gray-200" x-on:click="toggleOpen = !toggleOpen">
			<div class="accordion-title py-4 px-4 text-base font-semibold tracking-wide">Second Toggle Item</div><div class="py-4 px-4">
				<svg :class="{ '-rotate-180': toggleOpen }" class="rotate-0 h-6 w-6 transform" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7"></path></svg>
			</div>
		</div>
		<div class="accordion-body bg-white border border-gray-200 border-t-0 rounded-b text-gray-700 px-6 py-6 hidden" :class="{ 'hidden' : !toggleOpen}">
			This is our second toggle content.
		</div>
	</div>
</div>
Copy Code to Clipboard
Copy Code to Clipboard