Question

The result in jsfiddle may not work, but it does in my documents.

http://jsfiddle.net/hXzrA/

What is working is that my text is hidden, and when I click on Read More…, it reveals more of the text in the paragraph. If I click on Read More… again it collapses the text in the paragraph back to the normal state.

What I having been trying to figure out is:

1. a mouse over the Read More…. link. Kinda like a Blue color highlight so that people know it’s mouseover.

2. When the text is revealed, Read More… text should disappear and at the bottom of the now revealed text, should be Collapse text… (same blue highlight on mouseover). The Collapse should restore the text back to it’s collapse state.
   How do I achieve this in:

   $(document).ready(function(){
   
     var open = false;
     $('.reveal').click(function() {
       if (open) {
         $(this).animate({height:'20px'}); 
       }
       else {
         $(this).animate({height:'100%'});
       }
       open = !open;
     });
   });
   

3. Also, if you are able to get the text to implode/explode on reveal/hide, that would be so great too. I have been trying and trying, but couldn’t get it to do that.

Answer 1

Take a look how simplified it could be at this fiddle: http://jsfiddle.net/syEM3/

Javascript:

$('.reveal').click(function() {
    $(this).next().slideToggle();
});

EDIT:
For the effect of reveal / collapse:

$('.reveal').click(function() {
    $(this).slideUp(100).next().slideToggle();
    $(".collapse").slideDown(100);
});

$('.collapse').click(function() {
    $(this).slideUp(100).prev().slideToggle();
    $(".reveal").slideDown(100);
});