• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 430
  • Last Modified:

Jquery Accordian - close before open

I have the following code for an accordion menu, only problem is that it works fine the first time around, but then I have to double click the links before the open one closes and the clicked one opens.

All I want is :

When the anchor is clicked, check for open menus, if there are open ones, close them, then open the one thats clicked and add the class open.

$(function () {

	$('#pia-menu ul').hide();
	$('#pia-menu li a').click(function() 
	    	if ($(this).hasClass("open")){
	    	} else {

Open in new window

1 Solution
Gurvinder Pal SinghCommented:
check this demo here

when you click on an accordian option, it first closes the currently opened, and then open current one.

Let me know if i missed out on anything
Steve KrileCommented:
I would go for something like this:

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<style type="text/css">
`	body {width:100%;padding:0;margin:0;font-family:"Arial";}
	ul {padding:0;margin:0;}
	li {display:block;height:24px;border:solid 1px gray;width:200px;background:#ffc;text-align:center: padding:2px;}
	li.open {background:#ccc;}
	li a {text-decoration:none;display:inline-block;width:100%;outline: 0;text-align:center;}

<script src="http://code.jquery.com/jquery-1.4.2.min.js" language="javascript"></script>


	<ul id="pia-menu">
		<li><a href="#">Item 1</a></li>
		<li><a href="#">Item 2</a></li>
		<li><a href="#">Item 3</a></li>


	<script language="javascript">
		var oneOpen = false;
		$("#pia-menu li a").click(function(e){

		   var newTab = $(this).parent()

			$("#pia-menu li.open").stop().animate({height: "24px"}).removeClass("open");
			newTab.stop().animate({height: "150px"}).addClass("open");



Open in new window

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Never miss a deadline with monday.com

The revolutionary project management tool is here!   Plan visually with a single glance and make sure your projects get done.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now