title: Jquery calendar and tab sliding div clash
body: <p>Hey all, I am trying my best to figure out another way around this problem I seem to have encountered. On my website I have a jquery calendar and also a jquery div tab slider (this: <a href="http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html" rel="nofollow noreferrer">http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html</a>).</p>
  
  <p>The problem comes into play with the DIV tag. The calendar loads up inside a DIV with an ID of 'calendar'. The CSS for the tabs have the DIV hidden:</p>
  
  <p>CSS:</p>
  
  <pre><code> .boxBody div {display:none;}
   .boxBody div.show {display:block;}
   .boxBody #category a {display:block;}
  </code></pre>
  
  <p>And because of that, the calendar never shows on the page. However, if I comment out that CSS code above, it shows up but does not cover each section as it should. In other words, everything is shown when it should be hidden until the tabs are clicked on to reveal it.</p>
  
  <p>code:</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
   $(document).ready(function() {
  
   $('#tabMenu &gt; li').click(function(){    
     $('#tabMenu &gt; li').removeClass('selected');
     $(this).addClass('selected');
     $('.boxBody div').slideUp('1500');
     $('.boxBody div:eq(' + $('#tabMenu &gt; li').index(this) + ')').slideDown('1500');
   }).mouseover(function() { 
     $(this).addClass('mouseover');
     $(this).removeClass('mouseout');
   }).mouseout(function() {
     $(this).addClass('mouseout');
     $(this).removeClass('mouseover');
  });
  
  $('.boxBody #category li').mouseover(function() {
    $(this).css('backgroundColor','#888');
   $(this).children().animate({paddingLeft:"20px"}, {queue:false, duration:300});
  }).mouseout(function() {
    $(this).css('backgroundColor','');
    $(this).children().animate({paddingLeft:"0"}, {queue:false, duration:300});
  });
  
  $('.boxBody li').click(function(){
    window.location = $(this).find("a").attr("href");
  }).mouseover(function() {
    $(this).css('backgroundColor','#888');
  }).mouseout(function() {
    $(this).css('backgroundColor','');
  });
  });
  &lt;/script&gt;
  
   &lt;div align="center"&gt;
   &lt;div class="Mainbox"&gt;
   &lt;ul id="tabMenu"&gt;
   &lt;div id="theLogo"&gt;&lt;[img] src="img/theLogo.png" width="415" height="146" /&gt;&lt;/div&gt;
   &lt;li class="stats"&gt;&lt;[img] src="img/Stats.png" width="70" height="52" id="tab1" /&gt;&lt;/li&gt;
   &lt;li class="cal"&gt;&lt;[img] src="img/cal.png" width="70" height="52" id="tab2" /&gt;&lt;/li&gt;
   &lt;li class="loyalty"&gt;&lt;[img] src="img/Loyalty.png" width="70" height="52" id="tab3" /&gt;&lt;/li&gt;
   &lt;li class="Employees"&gt;&lt;[img] src="img/Employees.png" width="70" height="52" id="tab4" /&gt;&lt;/li&gt;
   &lt;li class="txtemail"&gt;&lt;[img] src="img/TxtEmail.png" width="70" height="52" id="tab5" /&gt;&lt;/li&gt;
   &lt;/ul&gt;
  
   &lt;div class="boxTop"&gt;&lt;/div&gt;
   &lt;div class="boxBody"&gt;
  
   &lt;div id="stats" class="show"&gt;          
        Just a test here....
   &lt;/div&gt;
  
   &lt;div id="cal"&gt;            
     &lt;div id='calendar'&gt;&lt;/div&gt;
   &lt;/div&gt;
  
   &lt;div class="boxBottom"&gt;&lt;/div&gt;
   &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>How can I change the tab javascript code so that it does not have to hide the DIV's so that the calendar will work? I've tried to replace all div's with 'span' or 'p' but that does not seem to work at all.</p>
  
  <p>Any help would be great as I am stuck on this and cannot go any further without it being solved! :)</p>
  
  <p>David</p>