Cacher is the code snippet organizer for pro developers

.expand { 
    .cntexp {
        display: none;
        background: #f5f5f5;
        overflow: hidden;  
    }
    span.clkexp {
        span {
            text-transform: none; 
        }
            display: block; 
    border-bottom: 1px solid #dddddd;
    height: 35px;
    cursor: pointer;
    cursor: pointer;
    padding: 0 0; 
    background: #ccc;
        &.expanded {
            background: #c2c2c2;
        }
    }
}

 $(".clkexp").click(function() {
        if (!$(this).hasClass("expanded")) {
            // $(".clkexp").next(".cntexp").slideUp(200); // hide else
            $(this).next(".cntexp").slideToggle(200);
            $('.clkexp').removeClass('expanded');
            $('.sidebar .heapBox').fadeIn();
            $(this).addClass('expanded');
        } else {
            $(this).removeClass('expanded');
            $(this).next(".cntexp").slideUp(200);
        }

    });

<div class="accordion">
    <div class="expand">
        <div class="wrpexp">
            <span class="clkexp"> Title 1 </span>
            <div class="cntexp">
                <p> Content</p>
            </div>
            <!-- .cntexp -->
            <span class="clkexp"> Title 2 </span>
            <div class="cntexp">
                <p> Content</p>
            </div>
            <!-- .cntexp -->
        </div>
        <!-- .wrpexp -->
    </div>
    <!-- .expand -->
</div>
<!-- .accordion -->