Solved

Jquery:  Showing and Hiding DIVs when a hyperlink is clicked

Posted on 2008-10-21
3
1,029 Views
Last Modified: 2010-04-21
I am hoping to use JQuery to do the following:

1. Hide all DIVs on a page with the class "content".
2. When a link with the class "mylinks" is clicked, the DIV with the matching ID should be shown and any other visible DIVs should be hidden.

For example, if the user clicked on the "option 2" link, the "option2" div should be made visible and any other divs with the class "content" should be hidden.

The idea is to use the links as a toggle for what to display in a particular section of the page.  It seems like this should be easy in Jquery but all of the examples I've run across have be more confused.

Any help with be appreciated!
<a href = "#" class = "mylinks" id = "option1">Click here for option 1</a>

<a href = "#" class = "mylinks" id = "option2">Click here for option 2</a>

<a href = "#" class = "mylinks" id = "option3">Click here for option 3</a>
 

<div id = "option1" class = "content">

Option 1 content goes here

</div>
 

<div id = "option2" class = "content">

Option 2 content goes here

</div>
 

<div id = "option3" class = "content">

Option 1 content goes here

</div>

Open in new window

0
Comment
Question by:OaktownBill
  • 2
3 Comments
 
LVL 16

Accepted Solution

by:
sh0e earned 500 total points
Comment Utility
<script>
$('.mylinks').click(function(){
  $('.content').hide();
  $('#' + this.id).show();
});
</script>
0
 

Author Comment

by:OaktownBill
Comment Utility
Awesome.  Thanks for your help!
0
 

Author Closing Comment

by:OaktownBill
Comment Utility
Thanks for your help!
0

Featured Post

What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

Join & Write a Comment

Suggested Solutions

by Julian Matz As of jQuery (http://jquery.com/) 1.4 the .live() method (http://api.jquery.com/live/) supports custom events as well as some standard JavaScript events that it previously didn't support. Among these is the submit event. Unlike …
What is a Lightbox? A Lightbox is the effect you see when you click, for example, an image and the screen fades out and up pops the same image but in its full size dimensions. There are lots of Lightbox effects for jQuery. Problem is they are a…
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)
The viewer will learn the basics of jQuery including how to code hide show and toggles. 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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

7 Experts available now in Live!

Get 1:1 Help Now