<div class="accordion-container">
<ul>
<li>
<h4 class="acc-toggle">Heading</h4>
<div class="acc-content">
<p>Hidden Content</p>
</div>
</li>
</ul>
</div>
.accordion-container h4 {font-size: 24px; margin: 20px 0;}
.acc-toggle {cursor: pointer;position: relative;padding-left: 20px;}
.accordion-container {width: 100%; margin: 0 auto;}
.acc-content {display: none;}
.acc-content.acc-show {display: block; padding-left: 20px;}
.acc-toggle:before {position: absolute; content: "+"; left: 0px;color: #fcb316;}
.acc-toggle.acc-minus:before {content: "-";color: #0055a5;}
// normal jquery
jQuery('.acc-toggle').click(function(){
var childElement = jQuery(this).next();
var prevElement = jQuery(this);
childElement.toggleClass("acc-show");
prevElement.toggleClass("acc-minus");
});
// IMPORTANT USE BELOW FOR PLATFORM & NOT BOTH
// this will need to be changed to the following to work on the momentum platform.
jQuery( document ).ready(function($) {
$('.acc-toggle').click(function(){
var childElement = $(this).next();
var prevElement = $(this);
childElement.toggleClass("acc-show");
prevElement.toggleClass("acc-minus");
});
});