Hello everyone, I've created an accordion drop-down feature that reveals content when the header of the DIV is clicked. Everything works fine, but I want the drop-down to collapse if the user clicks on the same header. I am new to JQUERY and have tried implementing a logic, but it doesn't seem to work. I would appreciate any help or guidance on how to achieve this using JQUERY.
Here is my XHTML:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>TEST</title>
<meta name="viewport" content="width=device-width"/>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div class="container">
<h2 class="acc_trigger"><a href="javascript: void(0);">ONE</a></h2>
<div class="acc_container">
<div class="block">
<h3>CONTENT 1</h3>
</div>
</div>
<h2 class="acc_trigger"><a href="javascript: void(0);">TWO</a></h2>
<div class="acc_container">
<div class="block">
<h3>CONTENT 2</h3>
</div>
</div>
<h2 class="acc_trigger"><a href="javascript: void(0);">THREE</a></h2>
<div class="acc_container">
<div class="block">
<h3>CONTENT 3</h3>
</div>
</div>
<h2 class="acc_trigger"><a href="javascript: void(0); ">FOUR</a></h2>
<div class="acc_container">
<div class="block">
<h3>CONTENT 4</h3>
</div>
</div>
</div>
</body>
</html>
Here is my CSS:
/* Your CSS code here */
And here is my JQuery:
$(document).ready(function(){
//Set default open/close settings
$('.acc_container').hide(); //Hide/close all containers
//On Click
$('.acc_trigger').click(function(){
if( $(this).next().is(':hidden') ) {
$('.acc_trigger').removeClass('active').next().slideUp();
$(this).toggleClass('active').next().slideDown();
}
else {
$(this).removeClass('active').next().slideUp();
}
return false;
});
});
I am trying to make the accordion collapse when clicking the same header again. Any suggestions or corrections are welcome. Thank you!