Skip to content

Instantly share code, notes, and snippets.

@kkiernan
Created January 27, 2017 15:51
Show Gist options
  • Save kkiernan/25173d140aabed97480e4d43ff294d20 to your computer and use it in GitHub Desktop.
Save kkiernan/25173d140aabed97480e4d43ff294d20 to your computer and use it in GitHub Desktop.
Collapsable Bootstrap Panel
//
// 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')
}
}
<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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment