Ok im working on this website where Id like to have the content of a div change to content based on the menu item clicked. I do not have pages for the different menu items but I have all the different content in divs in the index page. I would like to incorporate JQuery but I just cannot seem to find a way to link the menu item class or id to the corresponding div element. My code below":

```
<html>
<body>
    <div class="navbar grid_12">
                <ul>
                    <li class="btn" id="home"><a href="#">Home</a></li>
                    <li class="btn" id="about"><a href="#">About Me</a></li>
                    <li class="btn" id="gallery"><a href="#">Gallery</a></li>
                    <li class="btn" id="resume"><a href="#">Resume</a></li>
                    <li class="btn" id="contact"><a href="#">Contact Me</a></li>
                </ul>
     </div>
     <div class="content-container">
      <div class="bio content">
        About me content
      </div>
     <div class="contact content">
        Contact me content
     </div> 
     <div class="gallery content">
        gallery content
     </div>
   </div>
</body>
</html>

```

etc..

as for my JQuery coding so far this is where i am after hours of trying different things out

```
       //Update Content-Container Div 
$(document).ready(function(){
    var $main = $(".content-container");
    var $section = $(".content");

    $("#about").click(function(){
        $main.empty();
        $main.find(".bio");
        $(".bio").show();        
    });

});

```