Ask questions and get good answers on jQuery

vote up 2 vote down
star

Hi, I want to truncate some text that is comprised of a number of paragraphs. It should be possible to see the text that has been truncated by clicking on something like "read more..." . The text should then fade in and it should be possible to click the text away again by clicking "...read less".

There are a number of jquery plugins available but each one has a different problem:

  1. jtruncate (h***://blog.jeremymartin.name/2008/02/jtruncate-text-truncation-for-jquery.html) Allows you specify the number of characters before the split and counts over the

    tags - great! Unfortunately it then only actually truncates the paragraph that the split occurs within and leaves subsequent paragraphs visible. It does have decent fade function though and if this small problem could be fixed it would be the best.

  2. Truncate (h***://www.reindel.com/truncate/) works well with multiple paragraphs but sadly splits off the first letter of each paragraph on to a separate line which is no good. Nice fade functionality.

  3. Expander (h***://plugins.learningjquery.com/expander/index.html#getting-started) Does not work with multiple paragraphs. It just truncates each paragraph separately according to the character count set. It does have a fade function.

  4. Truncator (h***://henrik.nyh.se/2008/02/jquery-html-truncate) Works well with block level elements and therefore multiple paragraphs within a page but alas no fade effect!

Please please can someone suggest a way forward for me! It would be much appreciated..

flag

1 Answer

vote up 1 vote down

I have come up with a solution which although not perfect, does work.

The solution is simply to split the paragraphs over two divs. The first div contains the text you wish to be visible all the time and the second div contains the text // paragraphs you to become visible on clicking a button the says "view more" or whatever. Then it's just a case of using a simple bit of javascript to fade in the second div when the button is clicked.

the function:

<script type="text/javascript">  
    	    $(function()  
    	    {  
    	        $('#btnMore1').click(function()  
    	        {  
    	            $('div#expander1').fadeIn('slow');  
    	        });  

    	        $('#btnLess1').click(function()  
    	        {  
    	            $('div#expander1').fadeOut('slow');  
    	        });  
    	    });  
</script>

The div that is made visible by clicking #btnMore1 is called #expander1 above. If you place another button within a div called #btnLess and then place that div within the div that is made visible (#expander1), call it something like "view less" then it will only be seen when the #expander 1 div is visible. Click it and the text will fade out again.

I should also point out that I found away of adding a fade function to the Truncator (no. 4 in the above post) plugin. It is technique mentioned in the comments on it's webpage bu unfortunately it fades the entire text in / out rather then just the truncated text so it doesn't look great.

Hope this helps someone!

link|flag

Your Answer

Get an OpenID
or

Not the answer you're looking for? Browse other questions tagged or ask your own question.