Collapsible Content With jQuery

One of the easiest ways to create collapsible content in your webpages is by using the jQuery JavaScript library. Here are the steps to create your own collapsible content.

Step 1: Build HTML

The first step is putting your HTML content together. Basically, you will want to wrap up each content piece in a block element, with a click area inside each one and the collapsible content on the same "sibling" level as the click area. Each click area will need to have the same class name.

Source Code

<p><strong class="click_here">The jQuery Project</strong> <span>&mdash; Much more information can be found at the <a href="http://jquery.com" target="_blank">jQuery Project</a> page!</span></p>

<p><strong class="click_here">jQuery Mobile</strong> <span>&mdash; <a href="http://jquerymobile.com" target="_blank">jQuery Mobile</a> is the exciting mobile version of jQuery for your Android or iPhone!</span></p>

<div><p class="click_here"><strong>The Rest of the Story</strong></p>
<p>This is an area with several elements on a sibling level to the click area.</p>
<p>Each of these paragraphs will collapse/expand when the click element is clicked.</p>
<p>This one does too!</p>
</div>

Step 2: Include jQuery

If jQuery is not already included in the page somewhere, it will need to be included.

Source Code

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>

Step 3: Attach jQuery Events to Click Areas

Now for the hard part! Actually not really. With the HTML setup as described, it is simple to attach jQuery events.

Source Code

<script type="text/javascript">

// Start all areas closed
$(function(){
	$('.click_here').click()
})

// Attach toggle event to click areas
$('.click_here').toggle(
	function(){ $(this).siblings().hide('fast') },
	function(){ $(this).siblings().show('fast') }
)
</script>

Step 4: Other Considerations

Generally, click areas change the cursor and perhaps even change color as the mouse passes over them. We can accomplish this with CSS.

Source Code

<style type="text/css">
.click_here:hover {
	cursor: pointer;
	color: red;
}
</style>

Step 5: Try It Out!

The jQuery Project — Much more information can be found at the jQuery Project page!

jQuery Mobile jQuery Mobile is the exciting mobile version of jQuery for your Android or iPhone!

The Rest of the Story

This is an area with several elements on a sibling level to the click area.

Each of these paragraphs will collapse/expand when the click element is clicked.

This one does too!


Source Code

<style type="text/css">
.click_here:hover {
	cursor: pointer;
	color: red;
}
</style>

<p><strong class="click_here">The jQuery Project</strong> <span>&mdash; Much more information can be found at the <a href="http://jquery.com" target="_blank">jQuery Project</a> page!</span></p>

<p><strong class="click_here">jQuery Mobile</strong> <span>&mdash; <a href="http://jquerymobile.com" target="_blank">jQuery Mobile</a> is the exciting mobile version of jQuery for your Android or iPhone!</span></p>

<div><p class="click_here"><strong>The Rest of the Story</strong></p>
<p>This is an area with several elements on a sibling level to the click area.</p>
<p>Each of these paragraphs will collapse/expand when the click element is clicked.</p>
<p>This one does too!</p>
</div>

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
<script type="text/javascript">

// Start all areas closed
$(function(){
	$('.click_here').click()
})

// Attach toggle event to click areas
$('.click_here').toggle(
	function(){ $(this).siblings().hide('fast') },
	function(){ $(this).siblings().show('fast') }
)

</script>