Example unobtrusive jQuery javascripting adding "more" and "less" link to article. The article title toggles the article.

First article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque. Morbi ac risus vel nibh pretium ullamcorper. Nunc laoreet ultrices mi. Curabitur vitae ligula. Fusce ac leo non tortor sollicitudin adipiscing. Ut vestibulum, nulla et cursus convallis, nunc felis auctor ligula, sit amet sagittis magna magna ac orci.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque. Morbi ac risus vel nibh pretium ullamcorper. Nunc laoreet ultrices mi. Curabitur vitae ligula. Fusce ac leo non tortor sollicitudin adipiscing. Ut vestibulum, nulla et cursus convallis, nunc felis auctor ligula, sit amet sagittis magna magna ac orci.

Second article

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque. Morbi ac risus vel nibh pretium ullamcorper. Nunc laoreet ultrices mi. Curabitur vitae ligula. Fusce ac leo non tortor sollicitudin adipiscing. Ut vestibulum, nulla et cursus convallis, nunc felis auctor ligula, sit amet sagittis magna magna ac orci.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis pellentesque. Morbi ac risus vel nibh pretium ullamcorper. Nunc laoreet ultrices mi. Curabitur vitae ligula. Fusce ac leo non tortor sollicitudin adipiscing. Ut vestibulum, nulla et cursus convallis, nunc felis auctor ligula, sit amet sagittis magna magna ac orci.


(function($)
{	
	$.fn.setMoreLess = function()
	{
		return this.each(function()
		{
			var $article = $(this);
			// get the link in the heading
			var $articleLink = $article.find('>h3 a');
			// get first paragraph
			var $firstParagraph = $article.find('p:first');
			// get element to show when more is pressed
			var $more = $article.find('.more');
			
			// hide related article based on the hash of the link
			$articleLink.find(this.hash).hide().end()
				// add click event to toggle article
				.click(function($e)
				{
					$e.preventDefault();
					$(this.hash).toggle();
				})
				// initial hide
				.click();
				
			// back to articlecontainer
			// add more and less links on paragraphs
			$firstParagraph.append('<a class="actionLink" title="more" href="#">More</a>').end()
			
			// append less link to .more element
			$more.append('<a class="actionLink" title="less" href="#">Less</a>').hide().end()
			
			// add eventhandlers on added links
			$firstParagraph.find('a.actionLink[title=more]')
							.click(function($e)
							{
								$e.preventDefault();
								var $more_link = $(this);
								// hide more link	
								$more_link.hide();
								
								// show more
								$more.show()
									// find less link
									.find('a.actionLink[title=less]')
										// add click event on less link
										.click(function($e)
										{
											// show more link again
											$more_link.show();
											// hide parent
											$more.hide();
										}); // end click less
								
							}); // end click more
		}); // end each  
	}//end function setMoreLess
	
	// add moreless click events on ready
	$(function() 
	{
		 $('.ct_uitgebreidArtikel').setMoreLess();
	});
		
})(jQuery)