Using jquery to change the visibility of a div with nested content, onclick

Question

I have a list of links. When one of the links was clicked, I would like to change the visibility of the associated div. My html is as follows:

<div id="tab">
<ul>
<li id="tab1" class="active"><a href="#">Link 1</a></li>
<li id="tab2"><a href="#">Link 2</a></li>
<li id="tab3"><a href="#">Link 3</a></li>
<li id="tab4"><a href="#">Link 4</a></li>
</ul>
</div>

<div id="content1"><div class="nestedDiv">Content Here</div></div>
<div id="content2"><div class="nestedDiv">Content Here</div></div>
<div id="content3"><div class="nestedDiv">Content Here</div></div>
<div id="content4"><div class="nestedDiv">Content Here</div></div>

I tried using the examples I found here: How do you change DIVs on the mouse? (jquery?) , but it fails due to nested divs.

Any ideas on how I can make this work in such a way that all content within a given div, including other divs, is clicked? I would also like to keep the first div active when the page is first opened ... change the active view of the selected lithium ... but I have not tried to solve this yet.

Any input is appreciated. Thank!

Thank!

Answer 1

class= " div

<style type="text/css">
.content
{
    display: none;
}
</style>

<script type="text/javascript">

$(document).ready(function() {

   $("#tab a").click(function() {

      //reset
      $(".content").hide();
      $("#tab .active").removeClass("active");

      //act
      $(this).addClass("active")
      var id = $(this).closest("li").attr("id").replace("tab","");
      $("#content" + id).show();
   });

});
</script>