title: Jquery Show Hide multiple Class on Click
body: <p>I'm trying to make an interactive map to show locations of a range of services - each service has it's own icon and I have a legend (menu) that needs to show the service when a link is clicked and hide all the other services. All services must show on first page load (before clicking any of the links).</p>
  
  <p>I have set up each service (icon) as a class and applied the relevant class to a div that has relative positioning to make the icon sit in the correct spot on the map - the div is also used for tooltip functionality so I cannot change the html structure - I need the show/hide to work on classes not divs (there are a lot of services).</p>
  
  <p>I've almost got the show/hide working for the classes <a href="http://jsfiddle.net/M3ZhV/363/" rel="nofollow">http://jsfiddle.net/M3ZhV/363/</a> but it only seems to work AFTER you have clicked the link already once i.e. you need to click the link twice before it registers...</p>
  
  <p>Here is the html </p>
  
  <pre><code>&lt;div class="nav"&gt;
  &lt;ul id="menu"&gt;
    &lt;li id="link1"&gt;&lt;a href="#" data-page="page1"&gt;Topic One&lt;/a&gt;
  
    &lt;/li&gt;
    &lt;li id="link2"&gt;&lt;a href="#" data-page="page2"&gt;Topic Two&lt;/a&gt;
  
    &lt;/li&gt;
    &lt;li id="link3"&gt;&lt;a href="#" data-page="page3"&gt;Topic Three&lt;/a&gt;
  
    &lt;/li&gt;
  &lt;/ul&gt;
  &lt;/div&gt;
  &lt;div class="main"&gt;
    &lt;div class="page1"&gt;
       &lt;h1&gt;Show Page1&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="page2"&gt;
       &lt;h1&gt;Show Page2&lt;/h1&gt;
    &lt;/div&gt;
    &lt;div class="page3"&gt;
       &lt;h1&gt;Show Page3&lt;/h1&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>and the jquery:</p>
  
  <pre><code>$(function () {
    var curPage = "all";
    $("." + curPage).show();
    $("#menu a").click(function () {
      if (curPage.length) {
        $("." + curPage).hide("all");
      }
      curPage = $(this).data("page");
      $("." + curPage).show();
    });
  });
  </code></pre>
  
  <p>Can anyone please help point me in the right direction to get it to work straight away? i.e. the page loads showing all classes then when a link is clicked first time it shows only the class relative to that link and hides all others.</p>
  
  <p>I would really appreciate anyone's advice on how to achieve this - thank you.</p>