Collapsable Bootstrap Panel

_panels.scss

// 
// Mixins
// 

@mixin panel-heading-control($content) {
    border-right: 1px solid #ccc; // Adjust as needed
    content: $content;
    font-family: 'fontawesome'; // Adjust as needed
    left: 0;
    line-height: 41px; // Adjust as needed
    position: absolute;
    text-align: center;
    top: 0;
    width: 41px; // Adjust as needed
}

// 
// Panel Headings
// 

.panel-heading {
    font-weight: bold;
}

// 
// Collapsable Panel Headings
// 

.panel-heading-collapsable {
    cursor: pointer;
    padding: 10px 15px 10px 58px;
    position: relative;

    &:before {
        @include panel-heading-control('\f107')
    }

    &.collapsed:before {
        @include panel-heading-control('\f105')
    }
}

gistfile1.txt

<div class="panel panel-default">
    <div class="panel-heading panel-heading-collapsable" data-toggle="collapse" data-target="#filters">Filters</div>

    <div id="filters" class="panel-collapse collapse in">
        <div class="panel-body">
            Some content here
        </div>
    </div>
</div>