Toggles

Vertical and Horizontal

HTML

<div class="vertical-toggle-box">
    <div class="toggled-body">
        Vertical Toggle Example
    </div>
    <div id="vertical-toggle-button">
        ^
    </div>
</div>

<div class="horizontal-toggle-box">
    <div class="toggled-body">
        Horizontal Toggle Example
    </div>
    <div id="horizontal-toggle-button">
        >
    </div>
</div>

CSS

.toggled-body {
    width: 100px;
    height: 100px;
    background: #dddddd;
}

.horizontal-toggle-box {
    position: fixed;
    right: 0;
    top: 100px;
    width: 300px
}
.horizontal-toggle-box > .toggled-body {
    float: right;
}
#horizontal-toggle-button {
    float: right;
}

#vertical-toggle-button {
    margin-left: 30px;
    width: 40px;
    height: 17px;
}

#horizontal-toggle-button {
    margin-top: 30px;
    height: 30px;
    width: 17px;
    padding-top: 11px;
}

#horizontal-toggle-button,
#vertical-toggle-button {
    cursor: pointer;
    background: #cccccc;
    text-align: center;
}

JavaScript

$("#vertical-toggle-button").click(function(){
    $('.vertical-toggle-box > .toggled-body').slideToggle();
});

$("#horizontal-toggle-button").click(function(){
    $('.horizontal-toggle-box > .toggled-body')
    .animate({ width: 'toggle' }, function () {
        if($("#horizontal-toggle-button").html().indexOf("gt") > 0) {
            $("#horizontal-toggle-button").html("&lt;")
        } else {
            $("#horizontal-toggle-button").html("&gt;")
        }
        console.log($("#horizontal-toggle-button").html());
    });
});