Showing and hiding content in Jquery

Question

I'm trying to get the animation to work in this simple Jquery hide/show program. But when I hide the content and press "less...", there is no animation, just plain transition. I worked on this little thing for hours, but no success. Any suggestions?

<!DOCTYPE html>
<head>
    <style>
        body{ width:50%; margin: 0 auto;}
        .content{background:yellow; font-size:large; margin-top:10px; 
            padding:5px;}
        a{text-decoration:none;}
    </style>

    <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
    <script>
        $(document).ready(function() {
            $("#overflow").hide();

            $(".moreorless").click(function() {
                event.preventDefault();
                $(this).next("#overflow").slideToggle();

                if($(this).prev("#overflow").is(":hidden")){
                    $(this).prev("#overflow").show();
                    $(this).html(" less...");
                }
                else{
                    $(this).prev("#overflow").hide();
                    $(this).html(" more...");
                }       
             });
        })
    </script>
</head>

<body>
    <div class="content">
        Some Lorem ipsum<span id="overflow"> and some more lorem 
        and more and more and more and more and more and more and more and more  
        more and more and more and more and more and more and more and more and  
       </span><a href="#top" class="moreorless"> more...</a> 
    </div>
</body>
</html>

jsFiddle: http://jsfiddle.net/r5tYB/

I'd check out: http://stackoverflow.com/questions/3686096/animating-the-height-of-a-continer-on-jquery-load Your problem is by the time you need to animate `#container`, the `#overflow` is already loaded/animated. — GordonsBeard, Feb 27 '13 at 17:56

score 0 · Accepted Answer · answered Feb 27 '13 at 17:51

0

Does this: http://jsfiddle.net/4c9U4/1/ work as you'd expect?

$("#overflow").slideToggle(0);

$(".moreorless").click(function(event) {
    event.preventDefault();

    if($(this).prev("#overflow").is(":hidden")){
        $(this).html(" less...");
    } else {
        $(this).html(" more...");
    }

    $("#overflow").slideToggle();
});

I'm not sure what the problem is, but the transition won't work the first time around if you hide #overflow with .hide() or CSS.

answered Feb 27 '13 at 17:51

pdoherty926

9,895
4
37
68

Thank you so much! One thing that I'm not sure I understand is how the program knows to hide #overflow. Is it because of the slideToggle(0)? Does the 0 parameter tell it to hide it? – Feb 27 '13 at 19:01
It's a bit of a hack. Calling `slideToggle(0)` is calling slideToggle with a duration of 0 seconds and it's hidden instantly. However, this does something differently than simply calling `hide()`, which I'm still a little confused about... – pdoherty926 Feb 27 '13 at 19:14

score 0 · Answer 2 · answered Feb 27 '13 at 17:52

0

This should do it. You should send the duration parameter to the function toggle.

$("#overflow").toggle(500);
if ($("#overflow").is(':visible')) {
    $(this).text('less...');
} else {
    $(this).text('more...');
}

http://jsfiddle.net/r5tYB/

answered Feb 27 '13 at 17:52

andrés

412
6
14

Showing and hiding content in Jquery

2 Answers2