slideToggle()

The slideToggle() effect and the toggleClass() attribute are very useful jQuery tools. I will show you how to quickly implement this into your website and perhaps give you ideas on how you can add this to your already existing websites.

Step 1 – What am I planning on doing?

What I want to do is add a slideToggle() effect to the {CSS: +; DEMOPAGE; } logo and another seperate slideToggle() effect to the CSS-text image behind it.

Step 2 – The HTML

<div id="page-wrap"><!--used to center everything-->
	<div id="header">
    	<a href="http://css-plus.com" id="home-link">CSS Plus</a><!-- {CSS: +; } logo -->
	</div>	
	<div id="content">
    	<div class="button-wrap"><!-- used to align the buttons nicely -->
        	<a class="toggle-logo" href="#">Toggle logo</a><!-- button 1 -->
            <a class="toggle-header" href="#">Toggle header</a><!-- button 2 -->
		</div>
	</div>
</div>

Step 3 – The CSS

* { margin: 0; padding: 0; }/* reset margin and padding */
body { background: #79694C url(../../images/bg.jpg) repeat-x left top; font-family: Arial, Helvetica, sans-serif; overflow-y: scroll; }
#page-wrap { margin: 0 auto; position: relative; min-width: 991px; max-width: 1024px; }
/*
	Basic Elements
*/
#header { background: url(../../images/css-bg.gif) no-repeat 50px top; height: 127px; margin: 0 auto; width:100%; position: absolute; top: 39px; }/* add css-text image and set header position */
#header a#home-link { background: url(../../images/logo.gif) no-repeat left 5px; display: block; height: 127px; width: 878px; text-indent: -9999px; }/* add logo */
#content { width: 960px; position: absolute; top: 224px; }
/*
	slideToggle() demo
*/
#content .button-wrap { margin: 10px 0 0 0; width: 960px; }
#content .button-wrap a { background: #006ec1; border: 1px solid #034e86; color: #fff; display: block; font-weight: bold; padding: 5px; text-align: center; text-decoration: none; -moz-border-radius: 10px; -webkit-border-radius: 10px; border-radius: 10px; } /* add button styling*/
#content .button-wrap a.toggle-header { float: right; }
#content .button-wrap a.toggle-logo { float: left; }
#content .button-wrap a.active { background: #8f0000; border: 1px solid #450000; } /* add active state styling*/
#content .button-wrap .hidden { display: none; } /* this will be explained later on */

The CSS is pretty straightforward.

Step 4 – The jQuery

$(document).ready(function(){ 

	$("#content .button-wrap a.toggle-logo").click(function() { // When you click on a.toggle-logo
		$("#header a#home-link").slideToggle("slow"); // Toggle the "slow" slide effect on the logo
		$(this).toggleClass("active");  // Toggle the active button state
		return false; // Prevents browser from jumping to link anchor
	});

	$("#content .button-wrap a.toggle-header").click(function() { // When you click on a.toggle-header
		$("#header").slideToggle("slow"); // Toggle the "slow" slide effect on #header
		$(this).toggleClass("active"); // Toggle the active button state
		return false; // Prevents browser from jumping to link anchor
	});

});

With just 8 short lines of jQuery code we have two interactive buttons. Check out the demo.

A problem you say?

I was playing around with the buttons; Turning one off and then the other one on, etc. and I found that if I clicked the “Toggle logo”, then “Toggle header”, then “Toggle logo” again, the logo would still be “off”, which is what we want. However, if we clicked on “Toggle header”, “Toggle logo” then “Toggle header” again, the logo was still there but the button was on active state (red).

To fix this I added 1 more line to the jQuery, this is also where I make use of “hidden” class I declared in the CSS.

$("#content .button-wrap a.toggle-logo").toggleClass("hidden");

What that line of jQuery does is: whenever you click on the “Toggle header” button, it toggles the “hidden” class on the “Toggle logo” button. That way it prevents the little problem we have by hiding the one button when the other one is clicked.

So the final jQuery code looks like this:

$(document).ready(function(){ 

	$("#content .button-wrap a.toggle-logo").click(function() {
		$("#header a#home-link").slideToggle("slow");
		$(this).toggleClass("active");
		return false;
	});

	$("#content .button-wrap a.toggle-header").click(function() {
		$("#header").slideToggle("slow");
		$(this).toggleClass("active");
		$("#content .button-wrap a.toggle-logo").toggleClass("hidden");  // Toggles the "hidden" class on a.toggle-logo
		return false;
	});

});

Any questions or comments?

  1. John says:

    I’ve looked at this once before and have come back here because of the possibilities this presents.

    It could be great for fading parts of a document to reveal a hidden but relevant item when required by the viewer.

    This can also be great for revealing a diagram – With an onion-skin type of effect of layers been peeled away.

    Thanks for the idea.