Pane Toggle

by Charles Butler

HTML

<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css">
<div class="pane">
    <div class="pane-header">Settings
        <div class="pane-controls">
            <i class="fa-refresh"></i> 
            <span class="pane-toggle">
            <i class="fa fa-chevron-up"></i>
            </span>
 <i class="fa fa-times"></i>
        </div>
        <div style="clear:both;"></div>
    </div>
    <div class="pane-content">Difficulty on insensible reasonable in. From as went he they. Preference themselves me as thoroughly partiality considered on in estimating. Middletons acceptance discovered projecting so is so or. In or attachment inquietude remarkably comparison at an. Is surrounded prosperous stimulated am me discretion expression. But truth being state can she china widow.
    <ul>
        <li><a href="albums.php">Albums</a></li>
<li><a href="category.php">Categories</a></li>
<li><a href="index.php">Users</a></li>
<li><a href="comments.php">Comments</a></li>
        </ul>
    </div>
</div>

<div class="pane">
    <div class="pane-header">Settings
        <div class="pane-controls">
            <i class="fa-refresh"></i> 
            <span class="pane-toggle">
            <i class="fa fa-chevron-up"></i>
            </span>
 <i class="fa fa-times"></i>
        </div>
        <div style="clear:both;"></div>
    </div>
    <div class="pane-content">Difficulty on insensible reasonable in. From as went he they. Preference themselves me as thoroughly partiality considered on in estimating. Middletons acceptance discovered projecting so is so or. In or attachment inquietude remarkably comparison at an. Is surrounded prosperous stimulated am me discretion expression. But truth being state can she china widow.
    <ul>
        <li><a href="albums.php">Albums</a></li>
<li><a href="category.php">Categories</a></li>
<li><a href="index.php">Users</a></li>
<li><a href="comments.php">Comments</a></li>
        </ul>
    </div>
</div>

CSS

@import url(http://fonts.googleapis.com/css?family=Open+Sans:400, 600italic, 700, 400italic);
 body {
    font-family:"Open Sans", "Helvetica", Helvetica, Arial, sans-serif;
    font-size:14px;
    font-weight:400;
    color:#999;
    line-height:1.5;
    padding:30px;
}
.pane {
    border:1px solid rgb(235, 235, 235);
    border-radius:4px;
    max-width:600px;
}
.pane-header {
    border-bottom:1px solid rgb(235, 235, 235);
    line-height:45px;
    text-indent:7px;
    font-size: 16px;
    font-weight:600;
}
.pane-header .pane-controls {
    float: right;
    margin-right:10px;
}
.pane-header .pane-controls i{
    cursor: pointer;
    color: rgb(205, 205, 205);
}
.pane-header .pane-controls i:hover{
    cursor: pointer;
    color: rgb(175, 175, 175);
}
.pane-header .pane-controls .toggle {
    cursor: pointer;
}
.pane-header .pane-controls .remove {
    cursor: pointer;
}
.pane-content {
    padding:12px;
    font-size:13px;
}
.pane-content ul{
    list-style:none;
    padding-left:0;
    margin:12px -12px -12px -12px;
}
.pane-content li{
    padding-left:12px;
    margin:0;
    list-style-type: none;
    line-height:45px;
    font-size:13px;
    display: block;
    border-top:1px solid rgb(235, 235, 235);
}
.pane-content li:hover{
background: rgb(245, 245, 245);
}

JavaScript

$('.pane-toggle').click(function () {
        $('.pane-content',$(this).closest('.pane')).toggle('fast');
        $("i", this).toggleClass("fa-chevron-down fa-chevron-up");
    });