Take the 2-minute tour ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.

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

share|improve this question
 
How is the easing not properly working? Also, try running it without the callbacks in .slideDown() and .slideUp(). –  Andrew Peacock Jun 14 '13 at 18:39
 
thank you for looking at this for me, –  Andrew Ford Jun 16 '13 at 18:28
 
what I mean by the easing is not working is it is not sliding down and up, or if it is it is animating so fast it just looks like it blinks up or away. I have tried the same code with show his and I see the side to side effect but nothing with slideDown slideUp. –  Andrew Ford Jun 16 '13 at 18:29
 
I removed the callback and no change. I am using the underscore s theme fraimwork, maybe something in that is conflicting –  Andrew Ford Jun 16 '13 at 18:30
add comment

2 Answers

up vote 0 down vote accepted

I've created a fiddle (http://jsfiddle.net/rFAxc/3/) that has some css changes and some changes to your jquery. The jquery is now as follows:

Jquery:

jQuery(document).ready(function () {
    jQuery("#top-widget-area").slideUp('slow');
    jQuery("#top-widget-tab-show").click(function () {
        jQuery("#top-widget-tab-hide").show();
        jQuery("#top-widget-tab-show").hide()
        jQuery("#top-widget-area").slideDown();
    });
    jQuery("#top-widget-tab-hide").click(function () {
        jQuery("#top-widget-tab-hide").hide();
        jQuery("#top-widget-tab-show").show();
        jQuery("#top-widget-area").slideUp();
    });
});

CSS was updated as follows:

#top-widget-area {
    width: 100%;
    height: 240px;
    background-color: #00937b;
    display: block;
}
#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%;
    height: 64px;
    width: 78px;
}
#top-widget-tab-hide {
    background-image:url(images/top-nav-tab.png);
    background-repeat:no-repeat;
    margin-left: 10%;
    height: 64px;
    width: 78px;
    display: none;
}

HTH!

share|improve this answer
 
Thank you that works great. –  Andrew Ford Jun 21 '13 at 13:13
 
Awesome, please consider marking this as the answer as it will help other people that could have a similar issue. Thanks! –  NullHappens Jun 21 '13 at 13:37
add comment

Rather than writing such specific code and calling specific IDs to show/hide, you can abstract your code to work a lot more flexibly.

Houdini is a script I wrote that does what you're trying to accomplish: http://cferdinandi.github.io/houdini/

Here's the JavaScript:

$(function () {
    $('.collapse-toggle').click(function(e) { // When a link or button with the .collapse-toggle class is clicked
        e.preventDefault(); // Prevent the default action from occurring
        var dataID = $(this).attr('data-target'); // Get the ID of the target element
        $(dataID).toggleClass('active'); // Add or remove the '.active' class from the target element
    });
});

Here's the CSS:

.collapse-toggle {
    display: inline;
    visibility: visible;
    cursor: pointer;
}

/* If JavaScript is enabled, hide the collapsed element */
.collapse {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    /*  Add animation when content expands and collapses */
    -webkit-transition: opacity 0.35s ease;
       -moz-transition: opacity 0.35s ease;
        -ms-transition: opacity 0.35s ease;
         -o-transition: opacity 0.35s ease;
            transition: opacity 0.35s ease;
}

/*  When collapsed element has the .active class, show it 
 *  Uses max-height instead of display: none to allow for 
 *  CSS3 animations, which don't work on display values. */
.collapse.active {
    max-height: 9999em;
    opacity: 1;
}

And here's the HTML:

<p><a class="collapse-toggle" data-target="#collapse1" href="#">Click to Show</a></p>

<div class="collapse" id="collapse1">
    Now you see me, now you don't.
</div>

You simply apply the collapse-toggle class to anything you want to trigger the hide/show effect, and then use the data-target attribute to specify the ID of the thing you'll hide/show. Wrap the hidden content in a div with the collapse class and make sure the ID matches.

This approach lets you write the JS once, and then apply it as many times as you need to in your HTML without adding addition scripts.

share|improve this answer
 
That looks like some great code and I may try it, as for right now I don't need it to be more universal, I am just trying to get the effect to work so I can keep building. –  Andrew Ford Jun 16 '13 at 18:31
 
What I'm saying is, this will give you the same effect with far less code, that's cleaner, easier to read, and ultimately more maintainable, because if you need to make updates, you don't have to go back into the JS file and add or remove specific divs. –  Chris Ferdinandi Jun 16 '13 at 21:02
1  
Chris, yes you are correct you code is much more efficient and I will work in this direction. I am just learning right now and it seem easer for me to understand if I code it more specific even though it is clunky. thank you for the great example, I will use it as a target for my project but as this is a learning project it would not teach me much to just copy paste it in. Thanks again –  Andrew Ford Jun 21 '13 at 13:16
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.