How to achieve the following slide / toggle effect with jQuery?

Question

Right now on my website I have the following JavaScript that shows and hides a

<div class="commentBox"></div>

when user clicks a

<a href="#" class="storycoments" onclick="return false" onmousedown="javascript:toggleSlideBox">Show Comments</a>

Full Code:

<script type="text/javascript"> 
function toggleSlideBox(x){if($('#'+x).is(":hidden")){$(".comentBox").slideUp(200);$('#'+x).slideDown(200)}else{$('#'+x).slideUp(200)}}
</script>

<a href="#" class="storycoments" onclick="return false" onmousedown="javascript:toggleSlideBox">Show Comments</a>

<div class="commentBox">Content</div>

The effect can be illustrated like this:

enter image description here

I wanted to modify this function to act differently, but I couldn't figure it out. Basically what I wanted was to show content that is at the bottom once it starts expanding and have a fade in effect.

This is what I was hoping to achieve:

toggle test 2

Could anyone suggest how to achieve the slide / toggle effect that is shown in image 2? so when user clicks a link it expands like that and when link is clicked again it shrinks.

Maybe this helps: [How can I execute multiple, simultaneous jquery effects?][1] [1]: http://stackoverflow.com/questions/2344804/how-can-i-execute-multiple-simultaneous-jquery-effects — sascha, Nov 03 '11 at 11:04
Not really, it is not about having several effects at once, my problem is more of how to get it so when it slides down it shows the content that is at the bottom first, see how original function shows bunny ears first and one I want to achieve shows bunny tail first ))) — Ilja, Nov 03 '11 at 11:08
Oh, I'm sorry. You could just put your bunny in an extra div with overflow: hidden and a height of 0px. Now you could use bottom: 0px; on your bunny and slide down the "extra div". Then the first thing, you will see are the bunny's feet. - Another way: Use margin-top with a negative value and animate it to a positive value. — sascha, Nov 03 '11 at 11:13
I see what you mean with margins )) but how could I hide dive if the link is clicked again? would I set it back to negative margin? The thing is java script is my week side, could you please provide a sample code or something similar? — Ilja, Nov 03 '11 at 11:20

njr101 · Accepted Answer · 2011-11-03T12:18:22.910

2

The effect you describe looks just like the JQuery UI slide effect to me (rather than the blind effect that you have at present). This doesn't provide the opacity animation but provides a very simple solution otherwise. Or maybe I am misunderstanding you?

(The method accepts a parameter to slide down, rather than right-to-left of course)

$("#test").show("slide", {direction: "up"}, 1000);

JSFiddle here

edited Nov 03 '11 at 12:18

answered Nov 03 '11 at 11:11

njr101

9,499
7
39
56

Yeh the link you provided has the same effect as my first example. See how first example shows bunny ears first, this is exactly the same effect as you provided (I am using it right now). But in my second example you can see that it shows bunny bottom first. Can you see what I mean? – Ilja Nov 03 '11 at 11:14
The default effect is "blind" which shows the ears first. If you change this to "slide" you get the bunny bottom first. You can see this on the demo page by selecting "slide" in the drop-down list. – njr101 Nov 03 '11 at 11:15
It slides from left to right in example, how would I change it to slide from top to bottom? – Ilja Nov 03 '11 at 11:17
Yes exactly what I was looking for, how can I make it so it starts when a link is clicked? and will it slide back if the link is clicked again? Thank You ))) – Ilja Nov 03 '11 at 11:30
I've got it working on a click, how can I make it so it slides back if the link is clicked again? $('#clickme').click(function() { $("#test").show("slide", {direction: "up"}, 1000); }); – Ilja Nov 03 '11 at 11:32
see here http://jsfiddle.net/g7LwM/1/ If you have more problems you really should open new questions. The comments are not meant as a discussion board. – njr101 Nov 03 '11 at 11:34

score 1 · Answer 2 · answered Nov 03 '11 at 11:20

If you are just animating a background image, like that rabbit just set the background position like this:

background-position: 0 100%;

This will align the background to the bottom edge rather than the top.

For text content the same principle applies. You just have to position the content absolutely to the bottom edge. For example:

<div class="container">
    <div class="content">
        <p>Text</p>
    </div>
</div>

Then use this CSS:

.container {
    position: relative;
    overflow: hidden;
}

.content {
    position: absolute;
    bottom: 0; left: 0;
}

The only issue with this is that you need to find the height of the content so that you know how much to expand the container.

To do this, you can use this jQuery:

var height = $('.content').outerHeight();

Then on the click event just animate to the correct height:

$('.container').animate({
    'height': height
});

Hope that helps :)

as you said, this will only work for elements with a background-image. Since the class of his div is called "commentBox", I believe the rabbit was just an example. But nice tip anyway! — sascha, Nov 03 '11 at 11:26
I thought that might be the case, so if you read on I explain how to do it with content. — will, Nov 03 '11 at 11:44

How to achieve the following slide / toggle effect with jQuery?

2 Answers2