Raw HTML Accordion Widget

Raw Accordion Widget Markup and Scripts

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

Version 1.0
PHP HTML JS

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

Click to copy 
<?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>

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

Click to copy 
<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>

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

Click to copy 
<script>MD.accordion( 'accordion_unique_name' );</script>
by Last updated: July 7, 2021

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.

Start Building Websites That Delight

You can use the Marketers Delight WordPress Theme on unlimited sites. New features & updates are delivered to sites with your active license key.

Add to Cart

Leave a Comment

Previous Post:

Next Post:

Flash sale: Use BACKTOMD at checkout to save 5% on ANY purchase!