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

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