content div swap 2

navigation icons that swap div content upon click, each div has inside of it a hyperlink which can close it

by John Crafts

HTML

<div id="wrapper">
    <div id="icons"> 
        <a href="#testa"><div id="test1">a</div></a>
        <a href="#testb"><div id="test2">b</div></a>
        <a href="#testc"><div id="test3">c</div></a>
        <a href="#testd"><div id="test4">d</div></a>
    </div>
    <div id="content">
        <div id="testa"><p><a class="close" href="#">close</a>
            <br />content a</p></div>
            <div id="testb"><p><a class="close" href="#">close</a>
            <br />content b</p></div>
            <div id="testc"><p><a class="close" href="#">close</a>
            <br />content c</p></div>
            <div id="testd"><p><a class="close" href="#">close</a>
            <br />content d</p></div>
    </div>
</div>

CSS

html {
    color: #FFFFFF;
}
a {
    color: #FFFFFF;
    text-decoration: none;
}
a:hover {
    text-decoration: none;
}
#wrapper {
    margin: 0 auto;
    width: 500px;
    height: 500px;
    text-align: center;
}
#icons {
    height: 100px;
    width: 500px;
    margin: 0 auto;
    text-align: center;
}
#content {
    height: 400px;
    width: 500px;
    overflow: none;
    text-align: center;
    position: relative;
    background-color: #666666;
}
#icons div {
    width: 100px;
    height: 100px;
    margin-left: 20px;
    line-height: 100px;
    display: inline-block;
}
#content div {
    height: 400px;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    line-height: 30px;
}
#content div p {
    margin: 30px auto auto auto;
}
#test1 {
    background-color: #FF0000;
}
#test1:hover {
    background-color: #000000;
}
#test2 {
    background-color: #00FF00;
}
#test2:hover {
    background-color: #000000;
}
#test3 {
    background-color: #0000FF;
}
#test3:hover {
    background-color: #000000;
}
#test4 {
    background-color: #FFFF00;
}
#test4:hover {
    background-color: #000000;
}
#testa {
    background-color: #FF0000;
}
#testb {
    background: #00FF00;
}
#testc {
    background: #0000FF;
}
#testd {
    background: #FFFF00;
}

JavaScript

$(function () {
    $('#content div').hide();

    $('#icons a').click(function () {
        if ($(this).hasClass('active') == true) {
            return false;
        } else {
            $('a.active').removeClass('active');
            $(this).addClass('active');

            $('#content div').fadeOut();
            var contentToLoad = $(this).attr('href');
            $(contentToLoad).fadeIn();

            return false;
        }
    });
    $('#content a.close').click(function () {
        $('#content div').fadeOut();
        $('a.active').removeClass('active');
    });
});