title: JQuery simple tab program does not show nested Div Tag
body: <p>This code shows the primary div tag elements fine but ignores or does not recognize CSS and HTML in a child div tag.</p>
  
  <p>I can get this code to open multiple divs but not the divs nested inside the first level of divs.  6 hours later I am hoping for outside help.</p>
  
  <p>Here is the code:</p>
  
  <pre><code>&lt;html&gt;
      &lt;head&gt;
          &lt;style type="text/css"&gt;
              #tabs {
                  margin:20 px 0;
              }
  
              #tabs ul {
                  float: center;
                  background: #003333;
                  height:25px;
                  width: 500px;
                  padding-top: 4px;
              }  
  
              #tabs ul li {
                  float: left;
                  margin-left: 2em;
              }
  
              #tabs ul li a {
                  text-decoration:none;
                  color:#FFFFFF;
                  font-weight:bold;
              }
  
              #tabs ul li.active {
                  background-color:#669999;
              }
  
              #tabs div {
                  position:absolute;
                  width:500px;
                  height:500px;
                  padding:20px;
                  margin-top:2px;
              }
  
              #tab1 {
                  background-color:green;
              }
  
              #tab2 {
                  background-color:red;
              }
  
              #blueBox {
                  float:left;
                  width:100px;
                  height:100px;
                  background-color:yellow;
                  margin-left:5px;
                  margin-top:150px;
              }
          &lt;/style&gt;
  
          &lt;script src="js/jquery-1.4.2.js" type="text/javascript" /&gt;&lt;/script&gt;
          &lt;script type="text/javascript"&gt;
              $(document).ready(function() {
                  $('#tabs div').hide();
                  $('#tabs div:first').fadeIn('slow');
                  $('#tabs ul li:first').addClass('active');
                  $('#tabs ul li a').click(function() {
                  $('#tabs ul li').removeClass('active');
                  $(this).parent().addClass('active');
                  var selectedTab=$(this).attr('href');
                  $('#tabs div').fadeOut('slow');
                  $(selectedTab).fadeIn('slow');
                  return false;
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div id="tabs"&gt;
          &lt;ul&gt;
              &lt;li&gt;&lt;a href='#Tab1'&gt;Tab 1&lt;/a&gt;&lt;/li&gt;
              &lt;li&gt;&lt;a href="#Tab2"&gt;Tab 2&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
      &lt;div id="Tab1"&gt;
          &lt;p&gt;Contents in Tab1 &lt;/p&gt;
      &lt;/div&gt;
  
  &lt;!--this next part is the part I can't get to work. The div blueBox inside the div        Tab2--&gt;
  
           &lt;div id="Tab2"&gt;
                  &lt;p&gt;Contents in Tab2&lt;/p&gt;
                  &lt;div id="blueBox"&gt;
                      &lt;p&gt;Hello&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I believe it has something to do with not getting below the parent level to get the nested divs but haven't been able to google a solution despite an all nighter.  This is a great little code but is not practical if I can't get the nested div tags to work.</p>
  
  <p>Thanks in advance.</p>