What is jQuery code to extend it?

Question

I would like to have many paragraphs on one page. Each paragraph is for a different author with a more detailed description. If they click on reading more or inside a paragraph, I would like to hide / wipe all other paragraphs and expand the one they clicked on.

What is jQuery code to do something like this?

Thanks for any help.

Answer 1

Here you can do this without adding markup to your paragraphs.

HTML:

​<div id="content"> <p>content_here</p> <p>content_here</p> <p>content_here</p> <p>content_here</p> ​</div>​​​​​​​ 

And you will need css like this:

 .dorsal { display: none; } 

Further, JavaScript:

 ​$('#content').find('p').html( function(){ // for every paragraph in container var exposer = '<a href="#" class="expose">More...</a>', // link to insert content = $(this).html().split(''), cutLength = 50, // choose the cutoff point anterior = content.slice( 0,cutLength ).join(''), dorsal = content.slice( cutLength ).join(''), joined = anterior + exposer + '<span class="dorsal">' + dorsal + '</span>'; // assemble the new contents return joined; }) .on('click','.expose',function(e){ e.preventDefault(); var $thisp = $(this).closest('p'); $('#content').find('p').not( $thisp ).hide(); // hide others $thisp // for the enclosing paragraph .find('.dorsal') // select the hidden piece .show() // show it .end() // back to the paragraph .find('.expose') // find the "show more" link .hide(); // hide it });​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

You will need this in your $(document).ready() handler.

As others have noted, there are many plugins for this kind of thing. It is sometimes useful to use this on your own.

Re-folding and expanding the original paragraphs remains as an exercise.

Here is an example: http://jsfiddle.net/redler/wAY8g/1/

---

Updated to support multiple paragraph groups on a single Ibanez comment:

 $('#content').find('div').prepend(function() { var exposer = '<a href="#" class="expose">More...</a>', rawcontent = $(this).text(), cutLength = 100, abstract = rawcontent.split('').slice(0, cutLength).join(''), abbreviated = '<span class="abstract">' + abstract + exposer + '</span>'; return abbreviated; }).end().on('click', '.expose', function(e) { e.preventDefault(); var $thisgroup = $(this).closest('div'); $('#content').children('div').not($thisgroup).hide(); // hide others $thisgroup .find('p').show() .parent() .append('<a href="#" class="showall">Show all</a>') .end() .closest('div').find('.abstract').hide(); }).on('click', '.showall', function() { $(this).remove(); $('#content').find('div').show().end() .find('p:visible').hide().end() .find('.abstract').show(); });​ 

To make this work, we start with all the paragraphs hidden with css, and the script builds and displays theses at startup. Also updated to provide links for re-displaying the original state.

Example: http://jsfiddle.net/ZRB92/1/

Answer 2

Let this plugin handle the hard part for you:

http://plugins.learningjquery.com/expander/

Answer 3

 <div id="sample_1"> paragraph sample <br><a href="javascript: void(0)" onClick="hide_all_pars('par_1')">read more</a> <div id="par_1" style="display: none;"> Whole paragraph </div> </div> <div id="sample_2"> paragraph sample 2 <br><a href="javascript: void(0)" onClick="hide_all_pars('par_2')">read more</a> <div id="par_2" style="display: none;"> Whole paragraph 2 </div> </div> 

JavaScript:

 <script type="text/javascript"> function hide_all_pars(par){ var i=0; for(i=0;i<=2;i++){ $('#par_'+i).fadeOut('slow'); } $('#'+par).fadeIn('slow'); } </script> 

2 in the for loop will be replaced by the number of paragraphs you have