jquerycsshideshow

How can I hide one div and show another with jQuery?

I have 2 divs, one set to display:none; in the css when the page loads

I have two corresponding links. When the user clicks on link1 I would like to show div1 and hide div2. And when the user clicks on link2 I would like to show div2 and hide div1.

I have not been able to get this to work! Any help much appreciated. S

Solution

  • Here an example:

    $(function () {
  $(".div1, .div2").hide();

  $(".link1, .link2").bind("click", function () {
    $(".div1, .div2").hide();        

    if ($(this).attr("class") == "link1")
    {
      $(".div1").show();
    }
    else
    {
      $(".div2").show();
    }
  });

});

    And here is the Demo