I am working on a Wordpress theme. My goal is to have a top widget section that slides down and up when clicking on a tab.
I have it started and sort of functioning but I cant seem to get the slideDown sildeUp easing to work properly.
The CSS:
#top-widget-area {
width: 100%;
Min-height: 240px;
background-color: #00937b;
display: none;
}
#top-widget-area-sub {
width: 100%;
height: 15px;
background-color: #00937b;
}
#top-widget-tab-show {
background-image:url(images/top-nav-tab.png);
background-repeat:no-repeat;
margin-left: 10%;
min-height: 64px;
width: 78px;
}
#top-widget-tab-hide {
background-image:url(images/top-nav-tab.png);
background-repeat:no-repeat;
margin-left: 10%;
min-height: 64px;
width: 78px;
display: none;
The js
jQuery(document).ready(function() {
jQuery("#top-widget-area").slideUp('slow', function(){ jQuery(this).css('display','none'); });
jQuery("#top-widget-tab-show").click(function(){
jQuery("#top-widget-area").slideDown('slow', function(){ jQuery(this).css('display','block'); });
jQuery("#top-widget-tab-show").hide(1, function(){ jQuery(this).css('display','none'); });
jQuery("#top-widget-tab-hide").show(1, function(){ jQuery(this).css('display','block'); });
});
jQuery("#top-widget-tab-hide").click(function(){
jQuery("#top-widget-area").slideUp('slow', function(){ jQuery(this).css('display','none'); });
jQuery("#top-widget-tab-hide").hide(1, function(){ jQuery(this).css('display','none'); });
jQuery("#top-widget-tab-show").show(1, function(){ jQuery(this).css('display','block'); });
});
});
I am new to javascript so I hope I am just making a noob mistake and it is easy for someone to point out.
Thanks in advance for any help.
-Andrew
.slideDown()
and.slideUp()
. – Andrew Peacock Jun 14 '13 at 18:39