Show / Hide for multiple Divs

Show / Hide for multiple Divs

Hi,

Sorry if I am treading on old ground but I am new to jquery. I have a page with 3 divs and 3 anchors. I am trying to build this page that loads with all 3 divs hidden, then when someone clicks on the first anchor div 1 displays. If they click the 2nd anchor then div 1 hides and div 2 shows and so on. What is the best way to do this? My code below half works, but it forces the divs that are already hidden to hide again (which looks stupid).

Thoughts from the pros out there?

  2. <!DOCTYPE html>
  3. <html>
  4. <head>

  6.  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
  7. <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
  8.   
  9. </head>
  10. <body>

  12.   <a href="#" id="1">Lemon</a>
  13.   <a href="#" id="2">Lime</a>
  14.  <a href="#" id="3">Lime</a>

  16. <div style="height:300px;">

  18. <div id="lemon" style="width:400px;height:200px;background-color:red; display:none;">Lemongrass</div> 
  19. <div id="lime" style="width:400px;height:200px;background-color:green; display:none;">Lime</div>
  20. <div id="bitters" style="width:400px;height:200px;background-color:green; display:none;">Bitters</div>

  22. </div>


  25. <script>

  27. $(document).ready(function() { 
  28.    //add the click event to each element with the toggle class 
  29.    $('.toggle').click(function(){ 
  30.       // change the visibility of the elements with a class name that matches the title
  31.       $('.'+$(this).attr('title')).toggle();
  32.    });
  33.  })

  35. <!--<script>

  37.     $("#1").click(function () {
  38.       $("#lime").hide("clip", { }, 1000);
  39. $("#bitters").hide("clip", { }, 1000);
  40. $("#lemon").show("clip", { }, 1000);
  41.    });    

  43.     $("#2").click(function () {
  44.       $("#lemon").hide("clip", { }, 1000);
  45. $("#bitters").hide("clip", { }, 1000);
  46. $("#lime").show("clip", { }, 1000);

  48.     });    

  50.     $("#2").click(function () {
  51.       $("#bitters").hide("clip", { }, 1000);
  52. $("#lemon").hide("clip", { }, 1000);
  53. $("#lime").show("clip", { }, 1000);

  55.     });    


  58. </script>-->

  60. </body>
  61. </html>