javascript 平台手风琴

Posted 2021-05-03

<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");
    });
    
});