Animating a show/hide script

Question

I am trying to add an animation/fade to a show/hide script.

When the user clicks the ".show" anchor, I would like to slide down the ".buttons" div by the height of the ".targetDiv" div, after-which I would like the ".targetDiv" div to fade in.

Then (if possible), I would like the reverse action to occur when the ".hide" anchor is clicked - causing the ".targetDiv" to fade out, and the ".buttons" div to slide upwards (back to its original position).

Thank you for your help!

jsFiddle:

http://jsfiddle.net/XwN2L/1296/

HTML:

    <div id="content" class="targetDiv">Content</div>
    <div class="buttons">
        <a  class="show" target="content">Show</a>
        <a  class="hide" target="content" style="float: right;">Hide</a>
    </div>

JavaScript:

    $('.targetDiv').hide();
    $('.show').click(function () {
        $('.targetDiv').hide();
        $('#' + $(this).attr('target')).show();
    });

    $('.hide').click(function () {
        $('#' + $(this).attr('target')).hide();
    });

[An alternative way](http://jsfiddle.net/RaTJn/) – Alexander Jan 19 '13 at 23:09 — Alexander, Jan 19 '13 at 23:09

score 1 · Answer 1 · edited May 23 '17 at 12:27

I would simply use the slideUp/slideDown methods of jquery.

$('.targetDiv').hide();
$('.show').click(function () {
    $('.targetDiv').hide();
    $('#' + $(this).attr('target')).slideDown('slow');
});

$('.hide').click(function () {
    $('#' + $(this).attr('target')).slideUp('slow');
});

If you are desperate to slide and fade, checkout the following:

fadeOut() and slideUp() at the same time?

Boaz · Answer 2 · 2013-01-20T08:26:59.500

It's easier to accomplish when the target element is nested inside another element. This way you can separately apply the slide animations to the containing parent element and the fade animations to the target child element.

For example:

HTML

<div id="content_container">
    <div id="content" class="targetDiv">Content</div>
</div>

<div class="buttons">
    <a  class="show" target="content">Show</a>
    <a  class="hide" target="content" style="float: right;">Hide</a>
</div>

Javascript

$('.show').click(function () {
    var target        = $('#' + $(this).attr('target'));
    var target_parent = target.parent().height(target.outerHeight());
    target_parent.slideDown(250, function() { target.fadeIn(500); });
});

$('.hide').click(function () {
    var target        = $('#' + $(this).attr('target'));
    var target_parent = target.parent();
    target.fadeOut(500, function() {target_parent.slideUp(500);} );
});

Note how in the "show" handler, the parent element inherits its height from the currently hidden child element.

See possible jsFiddle demo

score -1 · Accepted Answer · answered Jan 19 '13 at 22:46

-1

one option:

give your elements absolute positioning:

position: absolute;
top:0px;

then animate it like so:

$('.show').click(function () {
        $('.targetDiv').hide();
        $('.buttons').animate({
            top : '80px' // the height of your content + the padding + the margins
        },'slow',function(){
            $('#content').fadeIn('slow');
        });
});


$('.hide').click(function () {
    $('#content').fadeOut('slow',function(){
        $('.buttons').animate({
            top : '0px' // the height of your content + the padding + the margins
        });
    });
});

working example: http://jsfiddle.net/XwN2L/1298/

answered Jan 19 '13 at 22:46

Nick Briz

1,917
3
20
34

Thanks, this does exactly what I wanted. However, my website uses multiple '.targetDiv' divs, not just '#content' - is there a way to select the div targeted in the show/hide anchors? I tried modifying your example, please refer to lines 8 and 14. Not sure what's wrong? jsFiddle: http://jsfiddle.net/XwN2L/1326/ Thanks again! – Jan 20 '13 at 09:46
Thanks for your reply Nick, I've tried implementing your new suggestion into the aforementioned website. The elements that show/hide are wrapped within a div, and the wrapper has absolute positioning and a 'top' value of 0px. The issue I am having is that the elements with the '.targetDiv' class aren't appearing during the animation. However, when I remove the class from a div, they appear! Myself and a friend have spent a few hours looking over it and we have had no luck! Hoping that I can borrow your expertise (yet again) - Here's what I'm working with: http://jsfiddle.net/XwN2L/1414/ – Jan 21 '13 at 20:59
is this what you mean: http://jsfiddle.net/XwN2L/1415/ <-- i commented out some code + moved/changed some of it with comments so you could understand why it wasn't working... at this point we're moving beyond your initial question though. Green check mark would be nice :) – Nick Briz Jan 21 '13 at 22:44
Sorry, I would've ticked your reply sooner, only I'm still rather new to SO. Thank you so much for your help and your patience! :) – Jan 21 '13 at 23:02

Animating a show/hide script

3 Answers3