?
Solved

jQuery: assign list of buttons to toggle a list of elements

Posted on 2011-05-03
6
Medium Priority
?
284 Views
Last Modified: 2012-05-11
I need a simple script that will create event handlers on all <li>'s in two navigation menus. The two menus are the same, one at the top of a page, one at the bottom. They will toggle the visibility of content <div>'s.

I want a click on the first <li> to be actionable (show target, hide others) on the first <div>. The second <li> on the second <div>, etc for any number of <div>'s and <li>'s.

Thanks
0
Comment
Question by:SonicVoom
  • 4
6 Comments
 
LVL 23

Expert Comment

by:cmalakar
ID: 35530620
Can you post your html with li and div elements ?
0
 
LVL 23

Expert Comment

by:cmalakar
ID: 35533531
Each div is associated with li.

Adding a click event for li, to find its div and alerting the html content.
$(function(){
  $("li").bind("click", function(){
   alert($(this).find("div").html());
});
});

<div id="hello">
<ul>
    <li>first div <div>first div content</div></li>
    <li>second div <div> second div content</div></</li>
</ul>

<ul>
    <li>third div <div>third div content</div></li>
    <li>fourth div <div>fourth div content</div></li>
</ul>
</div>

Open in new window

0
 
LVL 2

Author Comment

by:SonicVoom
ID: 35568184
Thanks for clarifying my lack of... clarity.

Here's what I meant. Clicking the first labelA would display only content1, labelB displays only content2, etc. It's not the show/hide technique I'm looking for as much as keeping the code dynamic and capable of handling any number of label/content pairs.

I've got each() in mind, but I'd need to get the current index of the each() iteration, and use it to access the child of #content that corresponds to that index. How is this done?

<div id="Main">
	<div class="sidebar">
		<ul class="mainNav">	
		<li><a>labelA</a></li>	
		<li><a>labelB</a></li>	
		<li><a>labelC</a></li>	
		<li><a>labelD</a></li>	
		</ul>
	</div>
	<div id="Content">
		<div>Content1</div>
		<div>Content2</div>
		<div>Content3</div>
		<div>Content4</div>
	</div>
	<div class="footer">
		<ul class="mainNav">	
		<li><a>labelA</a></li>	
		<li><a>labelB</a></li>	
		<li><a>labelC</a></li>	
		<li><a>labelD</a></li>	
		</ul>
	</div>
</div>

Open in new window

0
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 5

Accepted Solution

by:
dnzone88 earned 2000 total points
ID: 35688214
Try the following JQuery on your code see if it works for you
$(document).ready(function(){
	$('#Content div').not(':eq(0)').hide();
	
	$('ul.mainNav li').click(function(){
		var idx = $(this).index();
		$('#Content div').hide().eq(idx).show();
	});
});

Open in new window


0
 
LVL 23

Expert Comment

by:cmalakar
ID: 35689997
Check with this...
$(document).ready(function(){
	$('#Content div').hide();
	
	$('ul.mainNav li').bind('click', function(){
		var idx = $('ul.mainNav li').index(this);
		$("#Content div").each(function(index,eachDiv){
              if(idx == index){
                 $(eachDiv).toggle();
              }
            });
	});
});

Open in new window

0
 
LVL 23

Expert Comment

by:cmalakar
ID: 35706054
SonicVoom, Are you sure that the solution provided by dnzone88 works for your problem ?
0

Featured Post

Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this blog, we’ll look at how improvements to Percona XtraDB Cluster improved IST performance.
The viewer will learn how to look for a specific file type in a local or remote server directory using PHP.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Suggested Courses
Course of the Month9 days, 7 hours left to enroll

621 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question