Expandable Content with jQuery and HTML5 Data Attribute

Using jQuery together with the new HTML5 data attribute and a bit of CSS you can create nice expandable / collapsible content items. This is useful for things such as lists of FAQ questions and answers in order to save space.

HTML Structure:

<div class="toggle-unit">
	<h2 class="toggle-control" data-text="What is the answer?" 
	data-expanded-text="You've found it!">What is the answer?</h2>
	<div class="toggle-content">
		This is the answer you are seeking.
	</div><!-- /.toggle-content -->
</div><!-- /.toggle.unit -->

The key items here are the class names “toggle-unit” then “toggle-control” and “toggle-content” which are contained inside it. The actual HTML tags used aren’t important so if you wished you could make “toggle-unit” into a list item inside of an ordered list for example. The order of the toggle-control and toggle-content can also be switched depending on how you want the content to appear when revealed.

The other items of note here are the two attributes within the toggle-control element, “data-text” and “data-expanded-text”. These are new HTML5 attributes for associating custom data with html elements. These are optional. You only need them if you would like the text within toggle-control to change once its associated content is expanded. (The idea for this nice little added technique comes from Collin Wikman.)

More Information on HTML5 Data Attribute: http://ejohn.org/blog/html-5-data-attributes/

jQuery Code:

$(document).ready(function() {
	$('.toggle-content').hide();

	$('.toggle-control')
	 .addClass('clickable')
	 .bind('click', function() {
		var $control = $(this);
		var $parent = $control.parents('.toggle-unit');

		$parent.toggleClass('expanded');
		$parent.find('.toggle-content').slideToggle();

		// if control has HTML5 data attributes, use to update text
		if ($parent.hasClass('expanded')) {
			$control.html($control.attr('data-expanded-text'));
		} else {
			$control.html($control.attr('data-text'));
		}
	})
});

The jQuery code is pretty straight forward. It is dependent only on the 3 toggle classnames being present as already explained. Two extra classnames are also added by the script itself. First, the toggle-content is hidden. Then, the toggle-control element gets the extra class “clickable”. This can be used to add styles in your CSS to indicate that the element will do something once clicked. Another classname, “expanded”, gets added to the containing toggle-unit element once a user clicks to expand the hidden content. This class can be used to add different styling to the elements depending on whether the content is currently expanded or not.

Optional CSS:

.clickable {cursor: pointer;}

Finally an example of simple CSS you can add to your stylesheet to let users know that the toggle-control is clickable. (The reason for using jQuery to add the “clickable” class is because with JavaScript disabled, all hidden content will be displayed so the toggle-control will no longer do anything once clicked.)

See it all in action: http://www.webcodeshare.appspot.com/agx3ZWJjb2Rlc2hhcmVyDwsSB1dlYmNvZGUY-b0IDA

Advertisement

Posted by kristinlbradley on October 7, 2011

https://kristinlbradley.wordpress.com/2011/10/07/expandable-content-with-jquery-and-html5-data-attribute/