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:

---

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:

---

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.

Answer 1

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