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

**Kain Productions** · Jan 3, 2012 10:22

Hi,
I can't seem to figure out how to keep my accordion drop-down menu open when loading a new page. Here's my site I'm working on:

http://www.kainproductions.com/photography/

For example I want it so when I select a link from a drop down category I want the containing category to stay open when loading the new page until I decide to select a link from a different category. I did a google search and some people suggested cookies to save the state of the menu while others suggested added an script to run on page load. I'm somewhat a JavaScript/Jquery n00b, I'm not sure how to go about any of this.

**AussieJohn** · Jan 3, 2012 14:45

One other way to do such a thing is to have the server side apply a class to the currently active section (for example if you are on a child page of the "People" category, set the class "active" on the element that contains the accordion for that category)

Definitely cookies and/or local storage could be helpful here. You could store the ID of the currently active accordion whenever it is opened for example.

**Kain Productions** · Jan 3, 2012 19:37

Thanks. I think I solved it with CSS but another problem has come up. So far I've only applied the CSS fix to the people category. I have click on the people category twice to close it. Clicking other categories does not close the one that is open. Does anyone know what I need to modify to make the opened drop-down close when clicking on other categories? It works fine as it should if I don't click on the people category drop-down.

**ScallioXTX** · Jan 5, 2012 07:44

I took the liberty to fully rewrite your page to use <ul> and <li> which are far more appropriate for this purpose than <div>'s.
This works for me (save it as a file and call it index.php to test this).

HTML Code:

<html>
	<head>
		<title>Accordion test</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.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();
					}
				});
				
				// on click, show this element and hide all others
				$('#Accordion > li').click( function() {
					var me = $(this).children('ul');
					$('#Accordion ul').not(me).slideUp();
					me.slideDown();
				});
			});
		</script>
</html>
<body>
	<ul id="Accordion">
		<li>
			PEOPLE
			<ul>
				<li><strong>+</strong> <a href="index.php?show=philip&tiffany">PHILIP & TIFFANY</a></li>
				<li><strong>+</strong> <a href="index.php?show=heindo">HEINDO</a></li>            
				<li><strong>+</strong> <a href="index.php?show=juan">JUAN</a></li>
				<li><strong>+</strong> <a href="index.php?show=bettina">BETTINA</a></li>
				<li><strong>+</strong> <a href="index.php?show=adam">ADAM</a></li>
				<li><strong>+</strong> <a href="index.php?show=hazel">HAZEL</a></li>
				<li><strong>+</strong> <a href="index.php?show=ashton">ASHTON</a></li>
				<li><strong>+</strong> <a href="index.php?show=martina">MARTINA</a></li>
				<li><strong>+</strong> <a href="index.php?show=ava">AVA</a></li>
				<li><strong>+</strong> <a href="index.php?show=michelle">MICHELLE</a></li>
				<li><strong>+</strong> <a href="index.php?show=red">RED</a></li>
				<li><strong>+</strong> <a href="index.php?show=erin">ERIN</a></li>
				<li><strong>+</strong> <a href="index.php?show=scotty">SCOTTY</a></li>
			</ul>
		</li>
		<li>
			EVENTS
			<ul>
				<li><strong>+</strong> <a href="#">COMING SOON</a></li>
			</ul>
		</li>
		<li>
			LANDSCAPES
			<ul>
				<li><strong>+</strong> <a href="#">COMING SOON</a></li>
			</ul>
		</li>
		<li>
			INFO
			<ul>
				<li><strong>+</strong> <a href="#">COMING SOON</a></li>
			</ul>
		</li>
	</ul>
</body>
</html>

In essence what it does is when the page is loaded, it walks through all sub-items of the accordion, and then through all links in that sub-item. When it finds a link that has the same URL as the URL of the current page, it stop and go on to the next sub-item. If it doesn't find such a link it will collapse the current sub-item, in end effect only leaving open the sub item that contains the link to the current page, and collapsing all others

It would be best if you move the javascript to an external .js file, but for purposes of demonstration I found it easier to leave it inline.

HTH

**Kain Productions** · Jan 8, 2012 18:08

Thanks! How do I link or load each individual page? Also how do I make the drop-downs open faster?

**ScallioXTX** · Jan 11, 2012 05:00

Originally Posted by Kain Productions

Thanks! How do I link or load each individual page? Also how do I make the drop-downs open faster?

Sorry for the late reply, I've been kinda busy.

The links can just be regular links, nothing special. The links you had should work fine. If not, please update your website and point me to it so I can have a look.

As for the speed, you can give an argument to slideUp() and slideDown() that indicates how many ms the animation should take. So if you say slideUp(500) the element will slide up in half a second, with slideUp(250) it will take a quarter of a second, etc.

**Kain Productions** · Jan 11, 2012 08:06

Thanks! I got it working. As for the slideUp argument what would the code look like?

Would it be like this?

Code:

// on click, show this element and hide all others
$('#Accordion > li').click( function() {
var me = $(this).children('ul');
$('#Accordion ul').not(me).slideUp(500);
me.slideDown(500);
});

If not, what would the code look like?

**ScallioXTX** · Jan 11, 2012 10:37

Yup, it would indeed look like that

**Kain Productions** · Jan 11, 2012 10:50

Cool. Thank you so much for your help. One last thing. How do I make the Categories clickable so they can close themselves? Say I click on People, it expands, but if I click on People again, it doesn't close.

**ScallioXTX** · Jan 11, 2012 14:20

Not tested, but this should work

Code:

$('#Accordion > li').click( function() {
  $('#Accordion ul').slideToggle(500);
});

instead of

Code:

// on click, show this element and hide all others
$('#Accordion > li').click( function() {
  var me = $(this).children('ul');
  $('#Accordion ul').not(me).slideUp(500);
  me.slideDown(500);
});

**Kain Productions** · Jan 11, 2012 22:08

Hi, that kind of worked but it opens all of drop-downs at once. Also it has a weird drop-down animation.

**ScallioXTX** · Jan 13, 2012 14:18

Try this:

Code:

<html>
	<head>
		<title>Accordion test</title>
		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.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>
</html>
<body>
	<ul id="Accordion">
		<li>
			<span>PEOPLE</span>
			<ul>
				<li><strong>+</strong> <a href="index.php?show=philip&tiffany">PHILIP & TIFFANY</a></li>
				<li><strong>+</strong> <a href="index.php?show=heindo">HEINDO</a></li>            
				<li><strong>+</strong> <a href="index.php?show=juan">JUAN</a></li>
				<li><strong>+</strong> <a href="index.php?show=bettina">BETTINA</a></li>
				<li><strong>+</strong> <a href="index.php?show=adam">ADAM</a></li>
				<li><strong>+</strong> <a href="index.php?show=hazel">HAZEL</a></li>
				<li><strong>+</strong> <a href="index.php?show=ashton">ASHTON</a></li>
				<li><strong>+</strong> <a href="index.php?show=martina">MARTINA</a></li>
				<li><strong>+</strong> <a href="index.php?show=ava">AVA</a></li>
				<li><strong>+</strong> <a href="index.php?show=michelle">MICHELLE</a></li>
				<li><strong>+</strong> <a href="index.php?show=red">RED</a></li>
				<li><strong>+</strong> <a href="index.php?show=erin">ERIN</a></li>
				<li><strong>+</strong> <a href="index.php?show=scotty">SCOTTY</a></li>
			</ul>
		</li>
		<li>
			<span>EVENTS</span>
			<ul>
				<li><strong>+</strong> <a href="index.php?show=events-coming-soon">COMING SOON</a></li>
			</ul>
		</li>
		<li>
			<span>LANDSCAPES</span>
			<ul>
				<li><strong>+</strong> <a href="index.php?show=landscapes-coming-soon">COMING SOON</a></li>
			</ul>
		</li>
		<li>
			<span>INFO</span>
			<ul>
				<li><strong>+</strong> <a href="index.php?show=info-coming-soon">COMING SOON</a></li>
			</ul>
		</li>
	</ul>
</body>
</html>

Note I've added the 's to the top level menu items, i.e., PEOPLE, EVENTS, etc.
Without these s it will not work.

**Kain Productions** · Jan 13, 2012 19:47

Thanks, but your code interferes with the gallery sliders and stops them from working.

**ScallioXTX** · Jan 14, 2012 06:45

Looks like you have an old version of jQuery that doesn't support .delegate.

Try this instead:

Code:

$("#Accordion 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);
	}
});

**wavesailor** · Nov 26, 2012 11:16

Hi Kain,

I see you found a solution. I'm faced with the same problem. Please could you share with us how you solved it.

Many thanks,

JJ

Originally Posted by Kain Productions

Hi,
I can't seem to figure out how to keep my accordion drop-down menu open when loading a new page. Here's my site I'm working on:

http://www.kainproductions.com/photography/

For example I want it so when I select a link from a drop down category I want the containing category to stay open when loading the new page until I decide to select a link from a different category. I did a google search and some people suggested cookies to save the state of the menu while others suggested added an script to run on page load. I'm somewhat a JavaScript/Jquery n00b, I'm not sure how to go about any of this.

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions