Search code examples
jqueryfunctionshow-hidefunction-call

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


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!


Solution

  • <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();
    });