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