Jquery - Show different divs depending on which link you click on

Question

I have a web page with different links.

• Link #1
• Link #2
• Link #3
• and so on.

I want these links to show different divs that are hidden from the beginning. Link #1 should show Div #1 and so on. If Div #1 is open and I press Link #3, Div #1 should be hidden and Div #3 should appear instead.

• Link #1 - Shows Div #1 and hide #2 and #3
• Link #2 - Shows Div #2 and hide #1 and #3
• Link #3 - Shows Div #3 and hide #1 and #2
• and so on.

How do I approach this problem in the best way?

Thanks!

Answer 1

<a id="Link1" class="links" href="#" data-showdiv="Div1">Link 1</a>
<a id="Link2" class="links" href="#" data-showdiv="Div2">Link 2</a>
<a id="Link3" class="links" href="#" data-showdiv="Div3">Link 3</a>
etc...

<div id="Div1" class="divs"></div>
<div id="Div2" class="divs"></div>
<div id="Div3" class="divs"></div>
etc...

$(".links").click(function(){
    $("divs:visible").hide();
    $("#"+$(this).attr("data-showdiv")).show();
});