Raw Accordion Widget Markup and Scripts

Use custom accordion markup in custom templates without writing any custom CSS or JS.

PHP HTML JS
Click to copy

Option 2: Dynamic PHP. Use JS script in footer to activate accordion toggle.

<?php
	$id = 'accordion_unique_name';
	$accordion = array(
		array(
			'Your first accordion link' => 'https://domain.com/#url1',
			'Another accordion link' => 'https://domain.com/#url2',
			'Even more accordion links' => 'https://domain.com/#url3',
			'view_all' => array(
				'Browse all articles →' => 'https://domain.com/#viewalllink'
			)
		),
		array(
			'Your second accordion link' => 'https://domain.com/#url1',
			'Another accordion link' => 'https://domain.com/#url2',
			'Even more accordion links' => 'https://domain.com/#url3',
			'view_all' => array(
				'Browse all articles →' => 'https://domain.com/#viewalllink'
			)
		)
	);
?>

<div id="<?php echo $id; ?>" class="accordion">

	<?php foreach ( $accordion as $group => $fields ) : ?>
		<div id="accordion_unique_name_1" class="accordion-group active">
			<div class="accordion-title" data-accordion="1">Accordion Group 1</div>
			<div class="accordion-content">
				<ul class="list">
					<li><a href="#link">Your first accordion link</a></li>
					<li><a href="#link">Another accordion link</a></li>
					<li><a href="#link">Even more accordion links</a></li>
					<li class="small"><a href="#">Browse all articles →</a></li>
				</ul>
			</div>
		</div>
	<?php endforeach; ?>

</div>
Click to copy

Option 1: Raw HTML. Use JS script in footer to activate accordion toggle.

<div id="accordion_unique_name" class="accordion">

	<!-- Group 1 -->

	<div id="accordion_unique_name_1" class="accordion-group active">
		<div class="accordion-title" data-accordion="1">Accordion Group 1</div>
		<div class="accordion-content">
			<ul class="list">
				<li><a href="#link">Your first accordion link</a></li>
				<li><a href="#link">Another accordion link</a></li>
				<li><a href="#link">Even more accordion links</a></li>
				<li class="small"><a href="#">Browse all articles →</a></li>
			</ul>
		</div>
	</div>

	<!-- Group 2 -->

	<div id="accordion_unique_name_2" class="accordion-group">
		<div class="accordion-title" data-accordion="2">Accordion Group 2</div>
		<div class="accordion-content">
			<ul class="list">
				<li><a href="#link">Your first accordion link</a></li>
				<li><a href="#link">Another accordion link</a></li>
				<li><a href="#link">Even more accordion links</a></li>
				<li class="small"><a href="#">Browse all articles →</a></li>
			</ul>
		</div>
	</div>

	<!-- Group 3 -->

	<div id="accordion_unique_name_3" class="accordion-group">
		<div class="accordion-title" data-accordion="3">Accordion Group 3</div>
		<div class="accordion-content">
			<ul class="list">
				<li><a href="#link">Your first accordion link</a></li>
				<li><a href="#link">Another accordion link</a></li>
				<li><a href="#link">Even more accordion links</a></li>
				<li class="small"><a href="#">Browse all articles →</a></li>
			</ul>
		</div>
	</div>

</div>
Click to copy

Place the MD accordion script into your footer with a matching ID name for each accordion instance.

<script>MD.accordion( 'accordion_unique_name' );</script>
by Last updated: January 4, 2021 Get updates

Raw HTML Accordion Widget

With the Accordion Category Widget installed you can easily generate a link tree of posts listed by blog categories or from custom taxonomies.

The widget comes as is, but you can recreate custom accordions with raw HTML using the following options on this page.

The first option is raw HTML which you can simply paste into any template or area in WordPress that accepts HTML to render a pre-styled accordion widget. You can use the raw HTML to build a thorough accordion widget this way.

The second option is the dynamic approach which you can simply fill-in an array that will dynamically build your widget based on the array structure.

Insert Accordion Script

Both approaches require you to add a small JavaScript call to the bottom of the page(s) you want to show the widget on (see JS tab at top of page).

To insert the accordion script you can paste it into the footer of the MD scripts manager either from the global settings panel or from any individual page.

From a functions filed you can insert the accordion script like so:

<?php wp_add_inline_script( 'marketers-delight', "MD.accordion( 'accordion_unique_name' );" ); ?>

Make sure the accordion_unique_name ID is set to match the HTML ID you set per accordion, and that this inline call loads after the Marketers Delight scripts.js file has loaded on the page.

Leave a Comment

Previous Post:

Next Post:

Start building your website with MD now

Get started with MD today. Pay once for use on unlimited websites.
* Save 40% on license key renewals every 12 months. Get auto-updates sent to 5 websites.

Get MD Now
Labs

Get the latest MD sent straight to your inbox

There's always something new in the works in the MD Labs! Join the email list to get the newest content and releases sent straight to your inbox.*

Join the MD Newsletter

* I only email you when there's something new, or to share an exciting MD sneak peak.