Shane Strong

How To jQuery Toggle

jQuery was made to change the way that you write JavaScript. jQuery has tons of really nice effects that you can experiment with. One of my favorite things to do with jQuery is to do a toggle this is a really simple effect to do but will make people go WOW when they see it. You can use the toggle effect in multiple different way most of the time people just use the toggle up to down or toggle left to right. But some people don’t know that you can use jQuery toggle to go from your upper left or right corner to the opposite corner. Well here is some code that you can reference on different ways to toggle.

Lets do the easy toggles first

Top To Bottom

I am doing this for the comments section of most Wordpress sites. First you have to give the identify what the outer most container is of your comments section. Mine is id comments. So just to the top of my comments section I need to create a button but you don’t have to use a button it is just the easiest to explain. So you should have something that looks like this.

<button id="comments_bottom">This Is A Toggle Button</button>
<div id="comment">
//Your Comment Code
</div>

You will notice that I gave the button a id that is so that jQuery can find it. Next you have to create your js file. I would name it something like toggle.js. It should look like this depending on which way you want your content to toggle.

//Top To Bottom
$(document).ready(function() {
	$("#comment").hide();
	$("#comments_button").click(function() {
		$("#comment").animate({height: "toggle"}, 1000);
	});
});
//Left To Right Or Right To Left
//In order to do either you must float your #comment 
//the direction you want your content to come from!
$(document).ready(function() {
	$("#comment").hide();
	$("#comments_button").click(function() {
		$("#comment").animate({width: "toggle"}, 1000);
	});
});
//Upper Left To Lower Right Or Upper Right To Lower Left
//These ones you also have to float from the direction 
//they are coming from!
$(document).ready(function() {
	$("#comment").hide();
	$("#comments_button").click(function() {
		$("#comment").animate({width: "toggle", 
                    height: "toggle"}, 1000);
	});
});

Now all you have to do is call your jQuery script and a jQuery library and your toggle up to down should work. I use the Google library because of how quick it is. You can find more info about the Google library here jQuery Library

Other Ways To Toggle

There are a few other ways to do a toggle like from bottom to top and bottom corners to top corners. There is also some other things that you can do with toggle like fading. jQuery has a lot of really easy and light things that you can do to your site to make it just that much better. If I were you I would take a look at their site jQuery.

Website Design , Development, and SEO Marketing

If you by change need web design, web development, search engine optimization, or marketing done to one of your sites you can get in contact with me or you can contact Chosen. Chosen is a Lansing based Web Development, Web Design, Web Hosting, and Web Marketing firm. We are a small business but are growing in the Lansing Area for our Web Design and Development skills. We have done work for clients and companies. We prefer client work but we also take contract work. We have worked with most of the biggest web companies in the Lansing Area and all the way out to California. We would love to hear from you.

Popularity: 100% [?]