Jquery multilevel expandable menu

Hellow all,

First of all, let me say that I am a very beginner when it comes to Jquery. I am working from the book Novice to Ninja, and building a vertical multilevel sliding menu. All works fine. I have given the LI elements that i like to have default expanded a classname .active. I'd really like to start the menu with these classnames active/expanden. Is this possible? And how can this be done?

I have attached the code

thanks in advance

greetz,
walter

<!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" />
<title>Untitled Document</title>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js" type="text/javascript" charset="utf-8"></script>

<script type="text/javascript">
<!-- menu
	$(document).ready(function(){
	  $('#maincontent_menu ul > li ul')
		.click(function(e){
		  e.stopPropagation();
		})
		/*.filter(':not(:first)')*/
		.hide();
		
	  $('#maincontent_menu ul > li, #maincontent_menu ul > li > ul > li').click(function(){
		/*
		var selfClick = $(this).find('ul:first').is(':visible');
		if(!selfClick) {
		  $(this)
			.parent()
			.find('> li ul:visible')
			.slideToggle();
		}
		*/
		
		$(this)
		  .find('ul:first')
		  .stop(true, true)
		  .slideToggle(300);
	  });
	  

	  
	});
//-->
</script>

</head>

<body>
<div id="maincontent_menu">
<ul id="accordion">
            
            <!-- first level -->
        	<li>
        	<a href="page.html" class="active">non expandable</a>
        	</li>
            
            <!-- first level -->
            <li>
        	<a href="page.html">non expandable</a>
        	</li>
            	
            <!-- first level -->
            <li>
        	<a href="page.html">non expandable</a>
        	</li>
            
            <!-- first level -->
            <li>
        	<a href="page.html">non expandable</a>
        	</li>
            
            <!-- first level -->
            <li>
        	<a href="page.html">non expandable</a>
        	</li>
            
            <!-- first level -->
            <li>
        	<a href="page.html">non expandable</a>
        	</li>
            
            <!-- first level -->
            <li class="active">
        	Expandable
        		<ul>
        			<li class="second">
        				Expandable
        				<ul>
        					<li><a href="pagina.html">non expandable</a></li>
        				</ul>
        			</li>
                    <li class="second">
        				<span class="active">expandable</span>
        				<ul>
        					<li><a href="pagina.html">non expandable</a></li>
        					<li><a href="pagina.html" class="active">non expandable</a></li>
                            <li><a href="pagina.html">non expandable</a></li>
        				</ul>
        			</li>
                    <li><a href="pagina.html">non expandable</a></li>
        		</ul>
        	</li>
            
        </ul> 
        </div>
</body>
</html>

Open in new window

JavaScriptHTML

Last Comment

wal_toor

8/22/2022 - Mon

JosephEricDavis

11/12/2010

Not sure if this is exactly what you're after, but it sounds to me like you're just trying to add a class to an element when the page loads. Yes?

If so, inside your $(document).ready(function() {} You need to add something like this.

$('#ElementID').addClass('ClassNameToAdd');

$('#ElementID').addClass('ClassNameToAdd');

Open in new window

wal_toor

11/12/2010

ASKER

Thanks Joseph

But this was not what i meant. The classnames are already in the example code. I need the LI elements that have this classname to be default expanded.

greetz,
walter

Justin Mathews

11/12/2010

If you want the expandable items to be expanded by default, change the <script> as below:

<script type="text/javascript">
<!-- menu
	$(document).ready(function(){
	  $('#maincontent_menu ul > li ul')
		.click(function(e){
		  e.stopPropagation();
		}).attr("class", "active");
		/*.filter(':not(:first)')*/
		.hide();
		
	  $('#maincontent_menu ul > li, #maincontent_menu ul > li > ul > li').click(function(){
		/*
		var selfClick = $(this).find('ul:first').is(':visible');
		if(!selfClick) {
		  $(this)
			.parent()
			.find('> li ul:visible')
			.slideToggle();
		}
		*/
		
		$(this)
		  .find('ul:first')
		  .stop(true, true)
		  .slideToggle(300);
	  });
	  

	  
	});
//-->
</script>

Open in new window

Your help has saved me hundreds of hours of internet surfing.

fblack61

Justin Mathews

11/12/2010

Sorry, made a typo. See corrected below:

<script type="text/javascript">
<!-- menu
	$(document).ready(function(){
	  $('#maincontent_menu ul > li ul')
		.click(function(e){
		  e.stopPropagation();
		}).attr("class", "active")
		/*.filter(':not(:first)')*/
		.show();
		
	  $('#maincontent_menu ul > li, #maincontent_menu ul > li > ul > li').click(function(){
		/*
		var selfClick = $(this).find('ul:first').is(':visible');
		if(!selfClick) {
		  $(this)
			.parent()
			.find('> li ul:visible')
			.slideToggle();
		}
		*/
		
		$(this)
		  .find('ul:first')
		  .stop(true, true)
		  .slideToggle(300);
	  });
	  

	  
	});
//-->
</script>

Open in new window

wal_toor

11/12/2010

ASKER

Hellow jmatix,

Thanks for your reply, but not all the expandable items need te be expanded, only the ones that have the class 'active'

greetz,
walter

ASKER CERTIFIED SOLUTION

Justin Mathews

11/12/2010

THIS SOLUTION ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

GET A PERSONALIZED SOLUTION

Ask your own question & get feedback from real experts

Find out why thousands trust the EE community with their toughest problems.

wal_toor