Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 1041
  • Last Modified:

Jquery: Showing and Hiding DIVs when a hyperlink is clicked

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
OaktownBill
Asked:
OaktownBill
  • 2
1 Solution
 
sh0eCommented:
<script>
$('.mylinks').click(function(){
  $('.content').hide();
  $('#' + this.id).show();
});
</script>
0
 
OaktownBillAuthor Commented:
Awesome.  Thanks for your help!
0
 
OaktownBillAuthor Commented:
Thanks for your help!
0

Featured Post

Get expert help—faster!

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

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