Create a Fast and Simple Toggle View Content with jQuery

Written by Kevin Liew on 19 Jan 2010
179,961 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
run 9 years ago
thanks for the tutorial
Reply
Phil 9 years ago
anyone else having problems in ie displaying images? It works fine in firefox but when tested in IE the images dissapear. Also is it possible to display tables?
Reply
Kevin Liew Admin 9 years ago
You're trying to display more HTML stuff in this list.. you should change this to a div:

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


HTML:
<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>
Reply
Tam 9 years ago
I tried this ... but it doesn't work (it doesn't expand content). Any idea? I am using Chrome btw.
Reply
Kevin Liew Admin 9 years ago
hey guys, I have updated the tutorial, now you can put whatever thing you like in there. :)
Reply
Manu 9 years ago
Hi, I tried to add a html table, but it doesn't work... anyone find the solution?
Reply
lauren 9 years ago
I was able to make the h3 titles become where the user clicks to close and open like user xh0b0tx wanted, but I also want that h3 text to switch text when the user opens and closes the content.

I tried changing both
('span')

to

('h3')
with the wording I wanted to use but that didn't work

can you help?
Reply
lauren 9 years ago
how do i make the span AND the h3 toggle it similar to what xh0b0tx was trying to do?
Reply
Chris 9 years ago
Hi,
Great tutorial, works well and light weight.
Im not a whizz on jquery and cant get the first li to show as per your guidance:

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

Can you please advise? The span element changes but it doesnt show?
Reply
umer 9 years ago
sir this is awsom tutorial thanx for the posting this
Reply
Jeremy 9 years ago
Many thanks, this is exactly hat I as looking for.

Just one question : what if we want to add a link in the p section? A click on the link will open it but it would also trigger the toggle and close the box, since the p is contained in the li.

Giving a fixed height to the li to fixed height doesn't work, neither does playing on the z-index of the p box...
Reply
brody 9 years ago
great tutorial! I need to show the first two lines of text and when i clink the + show the rest. how would i do this? thanks.

Reply
Apoo 9 years ago
Really awesome .... Its first time I am able to follow some tutorial and it worked for me.... Keep posting such tutorials
Reply
alberto 9 years ago
Any help/direction you can provide on having another tier? I would like the first toggle to open and then the ability for another level with a toggle...

For example...

Engine Size >> opens to a list of engine sizes that toggle with engine type

Hope that makes sense! Thanks in advance.
Reply
alberto 9 years ago
Second try...

I am trying to add another level of toggle...Is this possible?

I would like the toggle to open up to a list that has another toggle...Hope this makes sense!

Thanks in advance...
Reply
Kevin Liew Admin 8 years ago
hmm, sorry, you can, but with this script I think you will get some conflicts.
Reply
Mojgan 8 years ago
Hi,
Great tutorial, nice scripts.I use it and load some text in a frame, every things is OK, only a problem with frame that appears scroll bar in height and width.I like it expand auto, please help!
Reply
Kevin Liew Admin 8 years ago
That's something to do with your frame.
Reply
curdaneta 8 years ago
Hi Kevin, great tutorial. You save me lot of time. Just a question, if there a way to close the current opened div when clicked another, I just want to show opened the current clicked item.
thanks
Reply