How To: Make Simple slideToggle app using jQuery

On 03.29.09, In CSS, Featured, JavaScript, jQuery, Programming, by admin

Tags: CSS, jQuery, Programming

Introduction:

After going through this article, you can be able to develop a simple slide panel application using jQuery, this is possible through slideToggle function in jQuery.

Prerequisite knowledge:

You should familiar with jQuery simple functions, should be familiar with simple JavaScript techniques.

Ingredients Used:

jQuery
Cascading Style Sheets (CSS)
Photoshop (Just for simple designing like background images and stuff)

Successfully Tested In

I have tested this simple snippet in Mozilla Firefox 3, Google Chrome 1.0.154.53 and Internet Explorer 7

About the application

Toggle, simple definition would be Turning something on or off. So, what does this slideToggle function does in our application? slideToggle function takes two arguments from two arguments one is optional that is callback argument is optional. syntax is right below:

slideToggle(speed,[callback])

As I have stated above it has got two arguments one is speed, and the other one is callback which is optional.
speed: It can be a String or Number. A String representing one of the three predefined values that is “slow”, “normal” or “fast” and coming to Number it should be in milliseconds to run the respective animation [example: 1000 is 1sec].
callback: A function to be executed whenever the animation completes. This is an optional argument.

jQuery Code:

$(document).ready(function(){
	$(".slide_button").click(function(){
		$("#slide_panel").slideToggle("slow");
		$(this).toggleClass("minus_icon"); return false;
	});
});

In the above code if you see, there is another function used that is toggleClass, toggleClass with one argument that is ‘class’, it adds a specified class if it is not present
and removes the specified class if it is present.

syntax:

toggleClass(class)

If you would like to know more about toogleClass functions please do visit this link: http://docs.jquery.com/Attributes/toggleClass

Full Source Code with CSS:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Slide Toggle in jQuery</title>
<style type="text/css">
/*
*****************************************
Author: Vivekanand
Website: http://www.developersnippets.com
*****************************************
*/
body {
	margin: 0 auto;
	padding: 0;
	width: 1000px;
	font: 120% Arial, Helvetica, sans-serif;
}
a{
	font: bold 75% Arial, Helvetica, sans-serif !important;
	outline: none;
}
#slide_panel {
	background: #a0a09f;
	height: 150px;
	display: none;
}
.slide_div {
	margin: 0;
	padding: 0 35px 0 0;
	background: url(images/slide_btn.jpg) no-repeat center top;
	float:right;
}
.slide_button {
	background: url(images/plus_minus_icon.gif) no-repeat right 5px;
	text-align: center;
	width: 154px;
	height: 32px;
	padding: 8px 5px 0 0;
	display: block;
	color: #fff;
	text-decoration: none;
}
.minus_icon {
	background-position: right -33px;
}
 
#menuheader{
	background-color:#CCCCCC;
	text-align:center;
	padding:10px 0px;
}
 
#header{
	border-top: solid 2px #343333;
	background:url(images/bg.jpg) #CCCCCC repeat-x top;
	height:90px;
}
 
#body_area{
	height:200px;
	background-color:#CCCCCC;
}
 
ul{margin:0px; padding:0px;}
ul li{display:inline; margin:20px;}
ul li a{font: 110% Arial, Helvetica, sans-serif !important; text-decoration:none; color:#000000; }
ul li a:hover{text-decoration:underline;}
 
#thumbimages {
	background-color:#595353;
	border:1px solid #817D7D;
	float:left;
	margin-left:200px;
	margin-top:20px;
	padding:10px;
	width:560px;
}
 
.req_img {
	border: 1px solid #817d7d;
	margin-left: 12px;
}
 
.img {
	border: 1px solid #817d7d;
	margin-left: 12px;
}
</style>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
	$(".slide_button").click(function(){
		$("#slide_panel").slideToggle("slow");
		$(this).toggleClass("minus_icon"); return false;
	});
});
</script>
</head>
<body>
<div id="menuheader">
	<ul>
		<li><a href="http://www.developersnippets.com">Home</a></li>
		<li><a href="http://www.developersnippets.com/about/">About Me</a></li>
		<li><a href="mailto:vivek@developersnippets.com">Contact Me</a></li>
		<li><a href="http://www.developersnippets.com/techvideobytes">TechVideoBytes</a></li>
		<li><a href="http://www.developersnippets.com/2009/03/29/how-to-make-simple-slidetoggle-app-using-jquery/">Back To The Article</a></li>
	</ul>
</div>
<div id="slide_panel">
	<div id="thumbimages">
		<a href="http://www.developersnippets.com" title="Developer Snippets"><img src="images/developersnippets.jpg" alt="Developer Snippets" width="121" height="83" border="0" class="req_img" /></a>
		<a href="http://www.developersnippets.com/techvideobytes/index.php" title="Tech Video Bytes"><img src="images/techvideobytes.jpg" alt="Tech Video Bytes" width="121" height="83" class="req_img" /></a>
		<a href="http://www.wittysparks.com/" title="Witty Sparks"><img src="images/wittysparks.jpg" alt="Witty Sparks.com" width="121" height="83" class="req_img" /></a>
		<a href="http://www.snehah.com/" title="Snehah"><img src="images/snehah.jpg" alt="Snehah.com" width="121" height="83" class="req_img" /></a>
	</div>
</div>
<div id="header">
	<div class="slide_div"><a href="#" class="slide_button">Our Networks</a></div>
</div>
<div id="body_area">
</div>
</body>
</html>

Preview and Download

By looking at the above code, I think you guys might be eager to view the demo of the same, then click here for the same. And if you would like to download the whole then please do click here.

Related Entries...

Slide In and Slide Out Status Message Box using jQuery
Introduction This post help beginners to learn and implement some jQuery Web Applications. Develop S ...
Floating SlideIn Menu with Anchor Link using jQuery
Introduction: This article will help you in developing simple Floating Slide-In Menu using jQuery. T ...
IE Issue: Background-image running out for input textbox
Many of us might have faced this issue especially in IE browsers, issue goes like this! when we apply ...
How To Check Whether Particular Div Is Present Using jQuery
There might be some scenarios where we need to check whether a particular DIV is visible or not and i ...
Smooth Slide Show s3Slider jQuery plugin
This is an awesome jQuery plugin like Jondesign's Smooth Slideshow v2.1, by looking at the jd's Smoot ...
Placing a Play Icon over the image using CSS
I am back again with some good snippet on "Placing a Play Icon over the image using CSS", After going ...
jQuery AJAX Tabs with ThickBox enabled
Introduction: This is one of the good example on how we can load a ThickBox (Example: ThickBox relat ...
flipping of image with another using JavaScript
Hey folks, hmmm... How can I start.... !!! Yeah, well folks... below is very simple snippet code for ...
Video tutorials for learning jQuery from scratch
Introduction: When I am searching for jQuery video tutorials in new TechVideoBytes site, I came acro ...
Simple Bookmark Script using jQuery
Introduction: Below is the simple Bookmark script, which has been implemented using jQuery, this mig ...

By Blogsdna

admin

Visit Authors Website | All Articles From This Author

You Might Like:

Please let us know your feedback about the article through the comments section below, we want to hear from you about our website. And your comment / advice may help us to serve you better in upcoming articles.

Thank You!
Vivekanand [Founder of DeveloperSnippets]

8 Responses

wuTalks » How To: Make Simple slideToggle app using jQuery

03.29.09

[...] Read more:? How To: Make Simple slideToggle app using jQuery [...]

YourBlogOnline | Best knowladge database » How To: Make Simple slideToggle app using jQuery

03.29.09

[...] View original here: How To: Make Simple slideToggle app using jQuery [...]

Rob

03.29.09

I tested it in IE6 looks good except for the content inside the Slide is to the right instead of centered.

admin

03.29.09

Hi Rob,

Thanks for your valuable comment and for testing my application, actually I have only tested in Mozilla (Old and New Version), IE 7 and IE 8, Google Chrome, as I am not having IE6 in my system I have not tested the same…

Definitely, will check in IE 6 and will get back to you. Hope this is fine with you.

Thanks,
Vivek

Sharad

03.29.09

Hi,

I used this code in one of my app. Everything works fine, but everytime after the panel slides, the screen flickers a little. i.e. the sliding effect is not smooth as it is in the example code you have shown? Any idea on that.

Thanks

admin

03.29.09

Hi Sharad,

First of all, I would like to thank you for using my code for your use in your project. Coming to your query – if you look at my example app, it is smooth and there is no flickering at all…

There might be only one reason, there is no problem with the code – either your screen window size might be less when you toggle vertical scroll bar might come up and when you toggle it will collapse, when scroll bar comes in you might see a slight flicking of the div slide…. other than that everything is ok…

Hope I answered your question….

If you have anything more than this, please do let me know and it would be great if you can showcase your link it is LIVE [Or you can share your code once, so that I can investigate on the same].

Thanks,
Vivek

hoodia

03.29.09

Simply, admirable what you will have achieved here. It’s pleasing to look you express from the heart and your readability on this important content will be simply looked. Exceptional submit and will stay up for your future update.

Missouri

03.29.09

I really love to read articles but when I read yours I am more interested with it. I am hoping the same best work from you in the future as well, thanks for this post. Just keep up the good work!:)