How to keep accordion drop-down menu open when opening a new page?

oh yes, thank you very much. works perfect. it was quit easy to delate one line. :wink:

Hi, I have used this code and it has been enormously helpful to me (a complete beginner). My accordion list opens and closes perfectly, and stays open on the selected page. One remaining problem, however, is that there is “white space” between all of the items in the list. (Both between the main items and also the sub-items, as if there were a paragraph tag in between them). Any tips how to get rid of this, ideally by amending the demonstrated code, would be most welcome.

Thank you!

Hi, welcome to Sitepoint :).

You will need to post a link to your page, a working demo or the relevant css,html and js so the answer can be tailored to your requirements.

Sounds like a margin problem but without the css/html it’s not possible to debug.

If you are not sure how to post code then read the posting guidelines thread that gives some easy tips.:slight_smile:

Hi Paul, many thanks for your reply and helpful advice.

The code I am using is slightly amended from Scallio’s above. As mentioned it opens and closes my list items as required. However it puts a lot of empty space between the lines of text on the site. Apart from the code quoted below I haven’t put any CSS items to affect the list appearance.



Within HEAD:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
		<script type="text/javascript">

			$(document).ready( function() {
				
				// initialize accordion
				$('#Accordion ul').each( function() {
					var currentURI = window.location.href;
					var links = $('a', this);
					var collapse = true;
					for (var i = 0; i < links.size(); i++) {
						var elem = links.eq(i);
						var href = elem.attr('href');
						var hrefLength = href.length;
						var compareTo = currentURI.substr(-1*hrefLength);
						
						if (href == compareTo) {
							collapse = false;
							break;
						}
					};
					if (collapse) {
						$(this).hide();
					}
				});
				
				$("#Accordion").delegate('span', 'click', function() {
					var ul = $(this).next('ul');
					if (ul.is(':visible')) {
						ul.slideUp(500);
					} else {
						$('#Accordion ul').not(ul).slideUp(500);
						ul.slideDown(500);
					}
				});
			});
		</script>

Within BODY:

<ul id="Accordion">
<li><span>ITEM ONE</span>
<ul>
<li><a href="http://.....">Sub-item 1</a></li>
<li><a href="http://.....">Sub-item 2</a></li>
<li><a href="http://.....">Sub-item 3</a></li>
</ul>
</li>

<li><span>ITEM TWO</span>
<ul>
<li><a href="http://.....">Sub-item 1</a></li>
<li><a href="http://.....">Sub-item 2</a></li>
<li><a href="http://.....">Sub-item 3</a></li>
</ul>
</li>

<li><span>ITEM THREE</span>
<ul>
<li><a href="http://.....">Sub-item 1</a></li>
<li><a href="http://.....">Sub-item 2</a></li>
<li><a href="http://.....">Sub-item 3</a></li>
</ul>
</li>


</ul>

Hi,

Is there any CSS to go with that ?

Make sure you clear the default top and bottom margins from the ul.


#Accordion,#Accordion ul{
list-style:none;
padding:0;
margin:0;
}

If that doesn’t solve the issue then we will need the full css and an indication of what browser you are seeing the problem in (if not all browsers).

Hi ,

i have used the html and script provided by @ScallioXTX

and modified it little bit , so that the accordion menu remains active even after page load

here is the complete code , in case some one needs it.

style.css



.cssmenu {
  list-style: none;
  margin: 0;
  padding: 0;
  width:220px;
  font-size:14px;
  font-weight:bold;
  float:left;
}
.cssmenu li {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family:Arial, Helvetica, sans-serif;
  font-size:13px;
}
.cssmenu a {
  background: #909090;
  border-bottom: 1px solid #eaeaea;
  color: #fff;
  display: block;
  margin: 0;
  padding: 8px 12px;
  text-decoration: none;
  font-weight: normal;
  border-radius: 3px;

}
.cssmenu a:hover {
  color: #000;
  padding-bottom: 8px;
  background-color:#c7e9ff;
}


.cssmenu ul li span{ display: block;
	padding: 8px 10px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	background-color: #f7931e;
	margin:2px 0px;
	width:201px;
	cursor:pointer;
	color:#FFF;
	
}

accordion.js


$(document).ready( function() {
				
				// initialize accordion
				$('#Accordion ul').each( function() {
					var currentURI = window.location.href;
					var links = $('a', this);
					var collapse = true;
					for (var i = 0; i < links.size(); i++) {
						var elem = links.eq(i);
						var href = elem.attr('href');
						var hrefLength = href.length;
						var compareTo = currentURI.substr(-1*hrefLength);
						
						if (href == compareTo) {
							collapse = false;
							$(elem).css({ 'background-color': '#c7e9ff', 'color': '#000' });
							break;
						}
					};
					if (collapse) {
						$(this).hide();
						
					}
				});
				
				
				$("#Accordion").delegate('span', 'click', function() {
					var ul = $(this).next('ul');
					if (ul.is(':visible')) {
						ul.slideUp(500);
					} else {
						$('#Accordion ul').not(ul).slideUp(500);
						ul.slideDown(500);
					}
				});
			});
			
			

Sidemenu.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="accordion.js"></script>
<title>Untitled Document</title>

</head>

<body>

        <div class="cssmenu">
       <ul id="Accordion">
		<li>
			<span>Profile</span>
			<ul>
				<li><a href="Sidemenu.html">BaseProfile</a></li>
				<li><a href="one.html">Billing Address</a></li>
				
			</ul>
		</li>
		<li>
			<span>Services</span>
			<ul>
				<li><a href="Sidemenu_one.html">Shipping Address</a></li>
				<li><a href="two.html">Billing Address</a></li>
			</ul>
		</li>
		
		
	</ul>

       </div>

</body>
</html>


Sidemenu_one.html


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="accordion.js"></script>
<title>Untitled Document</title>

</head>

<body>

        <div class="cssmenu">
       <ul id="Accordion">
		<li>
			<span>Profile</span>
			<ul>
				<li><a href="Sidemenu.html">BaseProfile</a></li>
				<li><a href="one.html">Billing Address</a></li>
				
			</ul>
		</li>
		<li>
			<span>Services</span>
			<ul>
				<li><a href="Sidemenu_one.html">Shipping Address</a></li>
				<li><a href="two.html">Billing Address</a></li>
			</ul>
		</li>
		
		
	</ul>

       </div>

</body>
</html>


I moved a post to a new topic: Adjust accordion logic to work for multiple accordions