CSS-Plus
CSS-Plus
Play with web technologies

SlideToggle()

March 16, 2010
Attention: This article is old and the content is outdated. I've left the article here for historical purposes.

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

/* reset margin and padding */
* {
    margin: 0;
    padding: 0;
}
body {
    background: #79694c url(../../images/bg.jpg) repeat-x left top;
    font-family: 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 */
.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;
}
/* add button styling */
.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;
    border-radius: 10px;
}
.content .button-wrap a.toggle-header {
    float: right;
}
.content .button-wrap a.toggle-logo {
    float: left;
}
/* add active state styling*/
.content .button-wrap a.active {
    background: #8f0000;
    border: 1px solid #450000;
}
/* this will be explained later on */
.content .button-wrap .hidden {
    display: none;
}

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.

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");
        // Toggles the "hidden" class on a.toggle-logo
        $(".content .button-wrap a.toggle-logo").toggleClass("hidden");
        return false;
    });
});
Demo