JQuery Show And Hide Toggle

http://stackoverflow.com/q/26479021/1144203

HTML

<div class="nav">
  <ul id="menu">
    <li id="link1"><a href="#" data-page="page1">Topic One</a></li>
    <li id="link2"><a href="#" data-page="page2">Topic Two</a></li>
    <li id="link3"><a href="#" data-page="page3">Topic Three</a></li>
  </ul>
</div>
<div class="main">
  <div class="page1">
    <h1>Show Page1</h1>
  </div>
  <div class="page2">
    <h1>Show Page2</h1>
  </div>
  <div class="page3">
    <h1>Show Page3</h1>
  </div>
</div>

CSS

.page1, .page2, .page3 {
  display:none;
  }

JavaScript

$(function () {
  var curPage = "all";
  $("#menu a").click(function () {            
    curPage = $(this).data("page");
    $("div[class='main'] div[class !='" + curPage +"']").hide(); // hide divs whose classes aren't curPage
    $("div[class='main'] div[class ='" + curPage +"']").show(); // show div whose class is curPage
  });
});