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>

Select allOpen in new window