Jquery calendar and tab sliding div clash

Question

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: http://www.queness.com/resources/html/tabmenu/jquery-tabbed-menu-queness.html).

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:

CSS:

 .boxBody div {display:none;}
 .boxBody div.show {display:block;}
 .boxBody #category a {display:block;}

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.

code:

 <script type="text/javascript">
 $(document).ready(function() {

 $('#tabMenu > li').click(function(){    
   $('#tabMenu > li').removeClass('selected');
   $(this).addClass('selected');
   $('.boxBody div').slideUp('1500');
   $('.boxBody div:eq(' + $('#tabMenu > 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','');
});
});
</script>

 <div align="center">
 <div class="Mainbox">
 <ul id="tabMenu">
 <div id="theLogo"><[img] src="img/theLogo.png" width="415" height="146" /></div>
 <li class="stats"><[img] src="img/Stats.png" width="70" height="52" id="tab1" /></li>
 <li class="cal"><[img] src="img/cal.png" width="70" height="52" id="tab2" /></li>
 <li class="loyalty"><[img] src="img/Loyalty.png" width="70" height="52" id="tab3" /></li>
 <li class="Employees"><[img] src="img/Employees.png" width="70" height="52" id="tab4" /></li>
 <li class="txtemail"><[img] src="img/TxtEmail.png" width="70" height="52" id="tab5" /></li>
 </ul>

 <div class="boxTop"></div>
 <div class="boxBody">

 <div id="stats" class="show">          
      Just a test here....
 </div>

 <div id="cal">            
   <div id='calendar'></div>
 </div>

 <div class="boxBottom"></div>
 </div>
 </div>

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.

Any help would be great as I am stuck on this and cannot go any further without it being solved! :)

David

Answer 1

Try an override in your CSS rules. You need to be as or more specific in your selector when doing that and the overriding rule must be after the original rule:

 .boxBody div {display:none;}
 .boxBody div.show {display:block;}
 .boxBody #category a {display:block;}
 /*Override for calendar*/
 .boxBody div#calender {display:block;}