Accordion Menu

by mynameisdonald

HTML

<div class="sidebar">
    <ul>
        <li>
            <h3>Section 1</h3>
            <div class="contents">
                I'm the content for <span></span> yo!
            </div>
        </li>
        <li>
            <h3>Section 2</h3>
            <div class="contents">
                I'm the content for <span></span> yo!
            </div>
        </li>
        <li>
            <h3>Section 3</h3>
            <div class="contents">
                I'm the content for <span></span> yo!
            </div>
        </li>
        <li>
            <h3>Section 4</h3>
            <div class="contents">
                I'm the content for <span></span> yo!
            </div>
        </li>
    </ul>
</div>
<div class="sub-sidebar">
    <h2>I'm the content for section <span></span></h2>
</div>

CSS

body {
    margin: 0;
    padding: 0;
    background: #e8e8e8;
}
.sidebar {
    background: #2BAAE1;
    color: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    top:0;
    width: 200px;
    z-index:1;
}
.sidebar ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.sidebar li {
    cursor: pointer;
    padding: 0;
    text-align: center;
    width: 100%;
}
.sidebar li:hover {
    background: #50bbe9;
}
.sidebar li h3 {
    font-size: 15px;
    margin: 0;
    padding: 10px 0;
    z-index: 2;
}
.sidebar li .contents {
    background: #fff;
    width: 100%;
    color: #000;
    padding: 0;
    z-index: 1;
    transition: 0.2s all linear;
    overflow: hidden;
    height: 0px;
}
.sidebar li .contents.active {
    height: auto;
    padding: 10px 0;
}
.sub-sidebar {
    background: #fff;
    color: #fff;
    bottom: 0;
    left: 0;
    position: fixed;
    top:0;
    width: 200px;
    z-index:0;
    transition: 0.2s linear;
}
.sub-sidebar.active {
    left: 200px;
}
.sub-sidebar h3 {
    color: #2BAAE1;
    padding: 10px;
}

JavaScript

var chosen;
$('body').on('click','.sidebar li h3',function(){
    var spanTxt = $(this).parent().find('.contents span').text();
        console.log(spanTxt);
    
    if (spanTxt == $(this).text()){
        $('.contents').removeClass('active');
        $('.contents span').text('');
    } else {
        $(this).parent().find('.contents').addClass('active');
        $(this).parent().find('.contents span').text( $(this).text() );
    }
});