Create a Fast and Simple Toggle View Content with jQuery

Written by Kevin Liew on 19 Jan 2010
187,378 Views • Tutorials

Introduction

This would be a simple, quick and easy tutorial. The reason I make this tutorial is for my upcoming post which will show you the plugins and scripts that I used in my most recent project. It's going to be a really useful post and make sure you won't miss it :)

This script is fairly straight forward. What it does is using the UL list and allow user to toggle to display the content of LI items. This is a really useful user interface feature that it helps designers to save space and build a less complicated user interface. It eliminates redundant element and allow user view the content only when they want to see it.

And...... this is how it will look like:

jQuery Toggle View

1. HTML

It consists of UL list and the rest is quite self-explanatory.

<ul id="toggle-view">
	<li>
		<h3>Title 1</h3>
		<span>+</span>
		<div class="panel">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
		</div>
	</li>
	<li>
		<h3>Title 2</h3>
		<span>+</span>
		<div class="panel">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
		</div>
	</li>
	<li>
		<h3>Title 3</h3>
		<span>+</span>
		<div class="panel">
			<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim.</p>
		</div>
	</li>
</ul>

2. CSS

I used the minimum CSS code to style this tutorial. The most important thing is, we have to make sure the P is hidden by default.

#toggle-view {
	list-style:none;	
	font-family:arial;
	font-size:11px;
	margin:0;
	padding:0;
	width:300px;
}

	#toggle-view li {
		margin:10px;
		border-bottom:1px solid #ccc;
		position:relative;
		cursor:pointer;
	}
	
	#toggle-view h3 {
		margin:0;
		font-size:14px;
	}

	#toggle-view span {
		position:absolute;
		right:5px; top:0;
		color:#ccc;
		font-size:13px;
	}
	
	#toggle-view .panel {
		margin:5px 0;
		display:none;
	}	

3. Javascript

This would be one of my shortest jQuery code! We attach click event to the LI item and everytime a user click on the item check if P tag is visible. If it's hidden, show it otherwise hide it. Also, it will change the html value for the SPAN to either plus or negative sign.

$(document).ready(function () {
	
	$('#toggle-view li').click(function () {

		var text = $(this).children('div.panel');

		if (text.is(':hidden')) {
			text.slideDown('200');
			$(this).children('span').html('-');		
		} else {
			text.slideUp('200');
			$(this).children('span').html('+');		
		}
		
	});

});

Conclusion

I hope you will like this quick and short tutorial! :) stay tuned for my upcoming post!

Demo Download
Join the discussion

Comments will be moderated and rel="nofollow" will be added to all links. You can wrap your coding with [code][/code] to make use of built-in syntax highlighter.

56 comments
Brett 11 years ago
Hey great tutorial thank you very much, I was wondering how do I justify the list items? I want to use this for a price list? so I need all descriptions within the li to lign up and also all the prices with a gap in between. Thanks for any advice
Reply
Bhargaw 11 years ago
Can we have the same toggle in nesting.... it means the main li should also have two more titles or name that can be expanded like the parent one.
some thing like this...
Title 1
a
b
c
Title 2
etc...

Where a,b,c are also expandable like titles.. can this be possible.. please help Thanks
Reply
Fabian 11 years ago
Many thanks for the tutorial.
I used your code and everything is working well, except for the content of each panel showing up by default. How can I change that? Here is the code I used:

#toggle-view .panel {
margin:5px 0;
display:none;
}
Reply
Michelle 10 years ago
Am I allowed to use the JQuery code for a WordPress theme I would like to sell on themeforest.net?
Reply
jiten lad 10 years ago
thank u so much....
Reply
Nathan 10 years ago
Hi! I got this working on a dev site, but when I try it on my live site the code is there but nothing shows up. Anyone have any insight into what might be going on?

The page I am testing it on is here: http://www.jigsawprods.com/dev-page-01/
Reply
Ag 10 years ago
Works like a charm! Thanks you so much : )
Reply
AND 10 years ago
Hmm, the HTML doesnt seem to me working for me. No lines appear and the + is below the title/isn't clickable. Any thoughts?
Reply
Bob Donahue 9 years ago
JS fails. Syntax errors.

Please correct and resubmit.
Reply
Robert Humphries 9 years ago
Kevin, this is a terrific script. LOVE IT. I am having one issue, though. It seems that sometimes the panel divs are completely open upon visiting a page where this script is implemented, and on other pages, the panel divs are closed. On pages where the panel divs starts out open, I have to click on each panel to close them individually. This seems to be an issue where there is a lot of text in a panel. Any way to force panels to stay closed until H3 is clicked on?
Reply
Patrick Lux 9 years ago
Thats an issue I have too, can you habe a look at that question?
Reply
Dave the Whiz 9 years ago
Assuming that you have some text and a toggle on/off button below, How do you change the value of the toggle button such that when one toggles the text off, the value of the button reads 'show' and then when one clicks on the button again to display the text, it reads 'hide'?
Reply
Gillbert Josh 9 years ago
Simple and superb very thin line, give more effective.

Keep going
Reply
A.Torres 8 years ago
Tank You !
Reply