<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.1/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!--
This example uses AwesomeFont.
Please include the tags
<link href="assets/css/font-awesome.min.css" rel="stylesheet" media="screen">
-->
<link href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" rel="stylesheet" media="screen">
<div class="container">
<div class="row">
<div class="widget widget-gray"> <!-- TYPE PANEL -->
<div class="widget-head"> <!-- HEAD PANEL -->
<h4 class="heading"><i class="fa fa-briefcase"></i> Lorem ipsum dolor</h4>
</div><!-- /HEAD PANEL -->
<div class="widget-body" id="widget-body1"> <!-- CONTENT PANEL -->
<h4> Lorem ipsum dolor </h4>
</div><!-- /CONTENT PANEL -->
<div class="widget-footer"><!-- FOOTER PANEL-->
<a href="#" class="fa fa-minus-circle fa-1x" data-toggle="tooltip" data-placement="right" title="" data-original-title="FA-MINUS-CIRCLE"><i></i></a>
<a href="#" class="fa fa-pencil fa-1x" data-toggle="tooltip" data-placement="right" title="" data-original-title="FA-PENCIL"><i></i></a>
<a href="#" class="fa fa-search fa-1x" data-toggle="tooltip" data-placement="right" title="" data-original-title="FA-SEARCH"><i></i></a>
<a href="#" class="fa fa-plus-circle fa-1x" data-toggle="tooltip" data-placement="right" title="" data-original-title="FA-PLUS-CIRCLE"><i></i></a>
<a href="#" id="toggle1" class="fa fa-chevron-up fa-1x" data-toggle="tooltip" data-placement="right" title="" data-original-title="FA-PLUS-CIRCLE"><i></i></a>
</div><!-- /FOOTER PANEL-->
</div> <!-- /TYPE PANEL -->
</div>
<div class="row">
<div class="widget"> <!-- TYPE PANEL -->
<div class="widget-head"> <!-- HEAD PANEL -->
<h4 class="heading"><i class="fa fa-briefcase"></i> Lorem ipsum dolor</h4>
</div><!-- /HEAD PANEL -->
<div class="widget-body" id="widget-body2"> <!-- CONTENT PANEL -->
<h4> Lorem ipsum dolor </h4>
</div><!-- /CONTENT PANEL -->
<div class="widget-footer"><!-- FOOTER PANEL-->
<a href="#" class="fa fa-minus-circle fa-1x" data-toggle="tooltip" data-placement="right" title="" data-original-title="FA-MINUS-CIRCLE"><i></i></a>
<a href="#" class="fa fa-pencil fa-1x" data-toggle="tooltip" data-placement="right" title="" data-original-title="FA-PENCIL"><i></i></a>
<a href="#" class="fa fa-search fa-1x" data-toggle="tooltip" data-placement="right" title="" data-original-title="FA-SEARCH"><i></i></a>
<a href="#" class="fa fa-plus-circle fa-1x" data-toggle="tooltip" data-placement="right" title="" data-original-title="FA-PLUS-CIRCLE"><i></i></a>
<a href="#" id="toggle2" class="fa fa-chevron-up fa-1x" data-toggle="tooltip" data-placement="right" title="" data-original-title="FA-PLUS-CIRCLE"><i></i></a>
</div><!-- /FOOTER PANEL-->
</div> <!-- /TYPE PANEL -->
</div>
</div>
/*WIDGETS */
a {color: #A3A5A7;text-decoration: none;}
a:hover, a:focus {color: #434446;text-decoration: none;}
.widget{background:#fff;margin:0 auto 20px;position:static;border:1px solid #c1c1c1;}.widget .tab-content{padding:0;}
.widget .widget-head{background-color:#f8f8f8;background-image:-moz-linear-gradient(top, #f8f8f8, #ededed);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#f8f8f8), to(#ededed));background-image:-webkit-linear-gradient(top, #f8f8f8, #ededed);background-image:-o-linear-gradient(top, #f8f8f8, #ededed);background-image:linear-gradient(to bottom, #f8f8f8, #ededed);background-repeat:repeat-x;border-bottom:1px solid #c1c1c1;color:#fff;text-shadow:0 1px 0 rgba(255, 255, 255, 0.5);height:40px;line-height:40px;position:relative;padding:0 15px 0 0;}
.widget .widget-head.progress{-webkit-border-radius:0 0 0 0;-moz-border-radius:0 0 0 0;border-radius:0 0 0 0;margin:0;padding:0;}
.widget .widget-head .glyphicons{height:40px;width:30px;padding:0;}.widget .widget-head .fai:before{width:30px;height:40px;line-height:31px;text-align:center;font-size:16px;color:rgba(255, 255, 255, 0.5);}
.widget .widget-head .heading{margin:0;color:#45484d;font-size:14px;height:40px;line-height:40px;padding:0 15px;float:left;}
.widget .widget-head .heading.glyphicons{width:auto;display:block;padding:0 0 0 35px;}
.widget .widget-head .heading.fai:before{padding:0;margin:0;left:0;top:0;height:40px;line-height:40px;text-align:center;width:35px;color:#45484d;font-size:16px;font-weight:normal;text-shadow:none;}
.widget .widget-head a{text-shadow:none;}
.widget .widget-head .dropdown-menu li>a:hover,.widget .widget-head .dropdown-menu li>a:focus,.widget .widget-head .dropdown-submenu:hover>a{background-color:#47759e;background-image:-moz-linear-gradient(top, #47759e, #d24343);background-image:-webkit-gradient(linear, 0 0, 0 100%, from(#47759e), to(#d24343));background-image:-webkit-linear-gradient(top, #47759e, #d24343);background-image:-o-linear-gradient(top, #47759e, #d24343);background-image:linear-gradient(to bottom, #47759e, #d24343);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffda4c4c', endColorstr='#ffd24343', GradientType=0);}
.widget .details{font-size:8pt;color:#45484d;}
.widget .widget-body{padding:20px 15px;}
.widget .widget-body form{margin:0;}
.widget .widget-body .count{font-size:15pt;font-weight:400;}
.widget .widget-body>p:last-child{margin:0;}
.widget .widget-body.list{color:#575655;padding:0;}
.widget .widget-body.list ul{margin:0;list-style:none;}
.widget .widget-body.list ul li{padding:0 10px;height:39px;border-bottom:1px solid rgba(0, 0, 0, 0.02);line-height:39px;text-align:left;clear:both;}
.widget .widget-body.list ul li:first-child{border-top:none;}
.widget .widget-body.list ul li:last-child{border-bottom:none;}
.widget .widget-body.list ul li .count{float:right;color:#47759e;}
.widget .widget-body.list ul li .sparkline{position:relative;top:5px;margin-left:5px;}
.widget .widget-body.list.products li{height:60px;line-height:60px;}
.widget .widget-body.list.products .img{float:left;display:inline-block;width:48px;height:44px;line-height:44px;color:#818181;text-align:center;background:#272729;margin:8px 8px 0 0;-webkit-border-radius:3px 3px 3px 3px;-moz-border-radius:3px 3px 3px 3px;border-radius:3px 3px 3px 3px;cursor:pointer;font-size:10pt;font-weight:600;}
.widget .widget-body.list.products .title{line-height:normal;display:inline-block;padding:13px 0 0;font-family:"Raleway",sans-serif;text-transform:uppercase;}
.widget .widget-body.list.products .title strong{font-family:"Open Sans",sans-serif;text-transform:none;}
.widget .widget-body.list.fluid ul li{height:auto;line-height:normal;padding:10px;}
.widget .widget-body.list.list-2 ul li{border-bottom:1px solid #d8d9da;border-top:none;background:#f8f8f8;}
.widget .widget-body.list.list-2 ul li.active{border-color:#dddddd;background:#fff;}
.widget .widget-body.list.list-2 ul li.active i:before{font-weight:normal;background:#47759e;color:#fff;text-shadow:none;}
.widget .widget-body.list.list-2 ul li.active a{color:#47759e;}
.widget .widget-body.list.list-2 ul li:last-child{border-bottom:none;}
.widget .widget-body.list.list-2 ul li a{display:block;color:#222;padding:0 0 0 30px;}
.widget .widget-body.list.list-2 ul li a i:before{color:#555;width:20px;height:17px;font-size:14px;border:1px solid #ccc;background:#dddddd;top:9px;left:0;text-align:center;vertical-align:middle;padding-top:3px;text-shadow:0 1px 0 #fff;}
.widget .widget-body.list.list-2 ul li.hasSubmenu{height:auto;}
.widget .widget-body.list.list-2 ul li.hasSubmenu ul{padding:0 0 10px;}
.widget .widget-body.list.list-2 ul li.hasSubmenu ul li{height:auto;line-height:normal;background:none;border:none;line-height:20px;}
.widget .widget-body.list.list-2 ul li.hasSubmenu ul li a{color:#333;padding:0 0 0 20px;}
.widget .widget-body.list.list-2 ul li.hasSubmenu ul li.active a{font-weight:bold;}
.widget .widget-footer{background:#f7f7f7;height:25px;line-height:25px;border-top:1px solid #e6e6e6;border-bottom:1px solid #ffffff;}
.widget .widget-footer .fa{width:25px;height:25px;line-height:25px;padding:0;float:right;}
.widget .widget-footer .fa i:before{font-size:16px;color:#c3c3c3;text-align:center;width:20px;height:25px;line-height:25px;text-shadow:0 1px 0 #fff;}
.widget .widget-footer .fa:hover i:before{color:rgba(0, 0, 0, 0.5);}
.widget.margin-bottom-none{margin-bottom:0;}
.widget.widget-gray{background:#f5f5f5;}
.widget.widget-gray .widget-head{background:#e9e9e9;border-color:#d1d2d3;box-shadow:inset 1px 1px 1px rgba(255, 255, 255, 0.6),inset -1px -1px 1px rgba(0, 0, 0, 0);-moz-box-shadow:inset 1px 1px 1px rgba(255, 255, 255, 0.6),inset -1px -1px 1px rgba(0, 0, 0, 0);-webkit-box-shadow:inset 1px 1px 1px rgba(255, 255, 255, 0.6),inset -1px -1px 1px rgba(0, 0, 0, 0);}
.widget.widget-gray .widget-head .heading{color:#555555;text-shadow:0 1px 0 #fff;}
.widget.widget-gray .widget-head .heading.fai:before{background:none;color:#555;border-color:rgba(0, 0, 0, 0.1);}
.widget.widget-body-white .widget-body{background:#fff;}
$(document).ready(function() {
$('a').tooltip({placement: 'top'});
$( "#toggle1" ).click(function() {
$("#widget-body1").slideToggle( "slow" );
$('#toggle1').toggleClass(function() {
if ($(this).is('.fa fa-chevron-down')) {
return '.fa fa-chevron-up';
} else {
return '.fa fa-chevron-down';
}
})
});
$( "#toggle2" ).click(function() {
$("#widget-body2").slideToggle( "slow" );
$('#toggle2').toggleClass(function() {
if ($(this).is('.fa fa-chevron-down')) {
return '.fa fa-chevron-up';
} else {
return '.fa fa-chevron-down';
}
})
});
});
