CODEWITHSUNDEEP
javascriptjqueryhtmlcss
KGKG
KGKG

Reputation: 88

Reveal/Collapse Text

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.

Upvotes: 0

Views: 2732

Answers (4)

António Almeida
António Almeida

Reputation: 10117

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);
});

Upvotes: 1

kelly johnson
kelly johnson

Reputation: 1636

stick a :hover on your selector and then put the rule for the hover. That should be in your css, not the jquery function.

wrap a span around your "Read More" text with a class and in the jquery, on the click function above you can do something like: $('spanClass').hide();

and just the opposite: $('spanClass').show();

Upvotes: 0

Barlas Apaydin
Barlas Apaydin

Reputation: 7315

You can not animate to 100%, you need to calculate element's original height first than manipulate the height.

Here is working jsFiddle.

var orgHeight = parseInt($('.reveal').css('height'));
$('.reveal').css('height','20px');

$('.reveal').click(function() {
    var target = parseInt($(this).css('height'));

    if (target != orgHeight) {
        $(this).animate({'height':orgHeight+'px'},500);
    }else{
        $(this).animate({'height':'20px'},500); 
    }
});

Upvotes: 1

Explosion Pills
Explosion Pills

Reputation: 191749

For hover effect, just use CSS:

.readmore:hover, .readless:hover {
   text-shadow: 2px 2px 3px blue;
}

As for the separate links, I think it's easier just to put them in your markup:

<a class="readmore">Click Here to READ MORE...</a>
TEXT TEXT TEXT
<a class="readless">Collapse Text...</a>

Then just .show/.hide .readmore/.readless as appropriate based on open.

http://jsfiddle.net/ExplosionPIlls/hXzrA/4/

Upvotes: 0

Related Questions