• 0

jQuery - change content and resize


Question

OK...

I am ok with jQuery, just struggling to think of the logical order and how to do this...

I have a DIV with say 5 lines of content, and then a "read more..." link. Upon clicking the link, I want the content to change to say 10 lines.

I have done this so when you click the link it instantly changes, but how would I do it so that it sort of scrolls down rather than the harsh jump-cut it currently does?

Cheers

Link to comment
Share on other sites

5 answers to this question

Recommended Posts

  • 0

I think this is best described with an image...

I'm not looking to fully replace the text (OK I am, but the first x characters will be exactly the same). It basically loads in the rest of the text, and the DIV expands downwards to compensate...

post-21654-12783235913268.jpg

Link to comment
Share on other sites

  • 0

is the full amount of text already in the div, or are you loading when you click read more? you could use .animate to change the height, revealing the text if its already there.

Link to comment
Share on other sites

  • 0

Without any explicitly declared height values, this should do the trick.

$('#YOUR_LINK').click(function() {
	var block = $(this).parent();
	block.css({'overflow': 'hidden', 'height': block.height() + 'px'}).html('YOUR_NEW_TEXT').animate({
		height: block.clone().css({'position': 'absolute', 'visibility': 'hidden', 'overflow': '', 'height': ''}).insertAfter(block).height()
	}).next().remove();
});

If you know the exact heights, it is as simple as...

$('#YOUR_LINK').click(function() {
	$(this).parent().css({'overflow': 'hidden', 'height': OLD_HEIGHT + 'px'}).html('YOUR_NEW_TEXT').animate({height: NEW_HEIGHT});
});

Link to comment
Share on other sites

This topic is now closed to further replies.
  • Recently Browsing   0 members

    • No registered users viewing this page.