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

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

0
wal_toor
Asked:
wal_toor
  • 3
  • 3
1 Solution
 
JosephEricDavisCommented:
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

0
 
wal_toorAuthor Commented:
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
0
 
Justin MathewsCommented:
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

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Justin MathewsCommented:
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

0
 
wal_toorAuthor Commented:
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
0
 
Justin MathewsCommented:
Try this:
<script type="text/javascript">
<!-- menu
	$(document).ready(function(){
	  $('#maincontent_menu ul > li ul')
		.click(function(e){
		  e.stopPropagation();
		})
		/*.filter(':not(:first)')*/
		.hide();
	
	  $('.active').parents().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

0
 
wal_toorAuthor Commented:
Yes, thats it! thanks
0
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

Get expert help—faster!

Need expert help—fast? Use the Help Bell for personalized assistance getting answers to your important questions.

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