Create a Fast and Simple Toggle View Content with jQuery

Written by Kevin Liew on 19 Jan 2010
179,959 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
qlworx internetagentur 11 years ago
This is sweet. I will use it for a FAQ section. Bookmarked your site!
Reply
ajesh 6 years ago
thank friend your idea & very helping your jq fuction
Reply
Boba 11 years ago
Cool :)
Reply
andi 11 years ago
hello, is it possible to have 2 or more such toggles in a single page?
i`ve tried to duplicate the js/html/css and change the DIV IDs for the second, but one of them always loads opened up, while the other one is closed by default. both work properly, the only problem is the open by default one; i`d like to have them both closed by default.
is this possible?

thanks & congrats for this simple and useful script!
andi
Reply
andi 11 years ago
sorry, it works if you have 2 toggles in one page, i made a mistake in my CSS file.
Reply
kevin Admin 11 years ago
Hi Fred, yea, something the simplest thing is really really useful. I found myself using this technique very often to simplify the web interface and encourage user interactivity :)
Reply
Fred Rocha 11 years ago
Just implemented this toggle on our to be FAQ page. It's something I was looking out for some time: simple and effective.

Merci!
Reply
Kaushal 11 years ago
When i open one item, it should automatically close the other open items.. how can this be done?
Reply
a 11 years ago
very nicee..tq :)
Reply
sunshine 11 years ago
This is so awesome! So simple and so wonderful! THANKS!
Reply
xh0b0tx 10 years ago
I have some questions. When a put image or link in <li></li> and click on it, the section closed automaticly. It's not useful for me. I want close the element only if I click on <h3> header. How do I make it?
Reply
Kevin Liew Admin 10 years ago
It was a mistake also, you can change this:

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

to

$('#toggle-view li h3').click(function () ......
Reply
xh0b0tx 10 years ago
$(document).ready(function () {

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

var text = $(this).children('p');

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

});

});

I'm doing like you say but its not working. Element is not toggle up and down.
Reply
Kevin Liew Admin 9 years ago
$(document).ready(function () {

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

var text = $(this).siblings('p');

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

});

});
Reply
Dayana 9 years ago
Thank you I was having this issue as well. Fixed by adding H3 and changing children to siblings. Easy as PIE :D
Reply
Joshua 6 years ago
Hello Kevin, I tried to use this code of yours, where only with a click on the header the click function would fire, but it doesnt work. Is there anything more that I need to know/consider to make it work, so that the toggle only works with a click on the h3 element?
Thanks for your help! Cheers
Reply
Red 9 years ago
Is there a way to add an active class to the h3 so it's colour can change to show it's selected?
Reply
Kevin Liew Admin 9 years ago
Yes, mod the script from:

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

H3 will get a class called "selected".
Reply
Rom 9 years ago
Hi. I have some question. i need next option - first (or specified) li item was opened by default. tnx
Reply
Kevin Liew Admin 9 years ago
Try this, put it in the first line of $(document).ready().

$('#toggle-view li:eq(0)').children('p').show();
$('#toggle-view li:eq(0)').children('span').html('-');

use the eq(0) to define which item you want it to be opened.
Reply
rom 9 years ago
tnx;)
Reply
corina 6 years ago
I've tried this too but it doesn't works...
could you give me an advice please?


$(document).ready(function(){

$('#toggle-view li:eq(0)').children('p').show();
$('#toggle-view li:eq(0)').children('span').html('-');

$('#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('+');
}

});
});








Reply
Sceptra 9 years ago
This script works great, however have an issue I use this to toggle email messages downloaded onto my database, however with the ones that have html coding, it doesn't work, is there a way to bypass it, I found out that the <div> tag and <br><hr style="HEIGHT: 1px"> tags are causing the problem, any help would be much appreciated
Reply