Reveal Hidden Text - Exercise

Contact Us or call 1-877-932-8228
Reveal Hidden Text - Exercise

Reveal Hidden Text

Duration: 20 to 30 minutes.

Open the file jqy-effects/Exercises/index.html in your browser. Use the file blog.js. Your task is to add some interactivity to the blog section of the page. The spec for the feature is as follows:

  1. Clicking on a headline in the #blog div should slide down the excerpt paragraph.
  2. Note that the headlines contain hyperlinks; you should ensure the links do not get followed.
  3. Clicking on another headline should slide down its excerpt paragraph, and slide up any other currently showing excerpt paragraphs.

Note: If the animation seems a bit jerky, try adding :visible to the selector you use to find the excerpts to slide up. This may make a slight improvement, but the real issue is something else, addressed in a second solution file.


$(document).ready(function() {
		.click(function(e) {
			var $h3 = $(this);
			var $p = $'p.excerpt');

Since the existing HTML uses hyperlinks for the blog items, we need to disable the default behavior by calling e.preventDefault() in the click handler. Note the use of the child selector > to prevent accidentally selecting an unintended h3 that might be in a blog entry.

We slid up only the visible paragraphs - even though it works if we slid up all paragraphs within the chosen items siblings, that seems to perform poorly.


$(document).ready(function() {
	// should really do the following step in a stylesheet	
	// hidden elements have size; this allows jQuery to calculate it
	$('#blog p.excerpt')
		.css( { visibility: "hidden", display: "block" } );
	var time = 500;
	var $blogTitles = $('#blog>ul>li>h3:first-child');
	$blogTitles.each(function() {
		var $this = $(this);
		var $excerpt = $(this).next('p.excerpt');
		var h = $excerpt.height();
		var w = $excerpt.width();
				height: h + "px",
				width: w + "px",
				display: "none",
				visibility: "visible"
		$ {
			$excerpt.slideToggle(time, 'linear');
				.slideUp(time, 'linear');

The real problem with sliding up and down in jQuery is that the code won't know the actual size of the element until it is fully expanded. Often the animation will incorrectly estimate the actual size, resizing based on an incorrect value, and then have to catch up at the end of the effect. If we let jQuery know what the actual size is, it can perform a better interpolation.

This solution uses visibility: hidden instead of display: none at the start, in order that the sliding element have its natural size. We then measure that size, and explicitly set it with the css function, while at the same time reversing the visibility and display to hidden and none respectively. This could result in a slight flicker as the page loads, but, in practice, the effect seems negligible. Having the correct final size will enable jQuery to better interpolate the height as it slides the element.

We have also used a linear easing, instead of the default swing, which improves the effect even more.