Create a Fast and Simple Toggle View Content with jQuery

Create a Fast and Simple Toggle View Content with jQuery


Create a Fast and Simple Toggle View Content with jQuery

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!

Author: Kevin Liew

Kevin Liew is a web designer and developer and keen on contributing to the web development industry. He loves frontend development and absolutely amazed by jQuery. Feel free to say hi to me, or follow @quenesswebblog on twitter.

Share the love

47 comments

qlworx internetagentur
Tue, 19th January 2010
This is sweet. I will use it for a FAQ section. Bookmarked your site! Reply
Boba
Tue, 19th January 2010
Cool :) Reply
andi
Thu, 21st January 2010
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
Thu, 21st January 2010
sorry, it works if you have 2 toggles in one page, i made a mistake in my CSS file. Reply
kevin Admin
Wed, 3rd February 2010
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
Wed, 3rd February 2010
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
Thu, 8th April 2010
When i open one item, it should automatically close the other open items.. how can this be done? Reply
a
Mon, 24th May 2010
very nicee..tq :) Reply
sunshine
Thu, 10th June 2010
This is so awesome! So simple and so wonderful! THANKS! Reply
xh0b0tx
Mon, 17th October 2011
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
Mon, 17th October 2011
It was a mistake also, you can change this:

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

to

$('#toggle-view li h3').click(function () ...... Reply
xh0b0tx
Tue, 18th October 2011
$(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
Tue, 7th February 2012
$(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
Tue, 18th September 2012
Thank you I was having this issue as well. Fixed by adding H3 and changing children to siblings. Easy as PIE :D Reply
Red
Thu, 2nd February 2012
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
Tue, 7th February 2012
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
Tue, 14th February 2012
Hi. I have some question. i need next option - first (or specified) li item was opened by default. tnx Reply
Kevin Liew Admin
Tue, 14th February 2012
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
Wed, 15th February 2012
tnx;) Reply
Sceptra
Thu, 23rd February 2012
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
run
Sat, 3rd March 2012
thanks for the tutorial Reply
Phil
Tue, 6th March 2012
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
Tue, 6th March 2012
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
Fri, 23rd March 2012
I tried this ... but it doesn't work (it doesn't expand content). Any idea? I am using Chrome btw. Reply
Kevin Liew Admin
Mon, 26th March 2012
hey guys, I have updated the tutorial, now you can put whatever thing you like in there. :) Reply
Manu
Fri, 29th June 2012
Hi, I tried to add a html table, but it doesn't work... anyone find the solution? Reply
lauren
Thu, 12th April 2012
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
Thu, 19th April 2012
how do i make the span AND the h3 toggle it similar to what xh0b0tx was trying to do? Reply
Chris
Fri, 1st June 2012
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
Mon, 30th July 2012
sir this is awsom tutorial thanx for the posting this Reply
Jeremy
Tue, 7th August 2012
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
Sat, 18th August 2012
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
Fri, 28th September 2012
Really awesome .... Its first time I am able to follow some tutorial and it worked for me.... Keep posting such tutorials Reply
alberto
Wed, 7th November 2012
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
Wed, 7th November 2012
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
Thu, 3rd January 2013
hmm, sorry, you can, but with this script I think you will get some conflicts. Reply
Mojgan
Sun, 6th January 2013
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
Tue, 8th January 2013
That's something to do with your frame. Reply
curdaneta
Mon, 11th March 2013
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
Brett
Fri, 15th March 2013
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
Sun, 31st March 2013
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
Mon, 22nd July 2013
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
Sun, 20th October 2013
Am I allowed to use the JQuery code for a WordPress theme I would like to sell on themeforest.net? Reply
jiten lad
Mon, 28th October 2013
thank u so much.... Reply
Nathan
Mon, 10th March 2014
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
Mon, 14th April 2014
Works like a charm! Thanks you so much : ) Reply
AND
Thu, 10th July 2014
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

Leave a Comment

Please keep in mind that comments are moderated and rel="nofollow" is in use. You can use [code][/code] if you want to write codes. Don't spam us :) Thanks!

Advertisement