JSFiddle - React, Tailwind, and code Playground

by Plippie Plop

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.1/js/bootstrap.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<div class="container">
    
<div class="panel panel-default">
<div class="panel-heading">
    <i class="fa fa-tasks"></i>
    <h1>Hello world <span class="label label-primary">You too!</span></h1>
    
    <div class="panel-heading-tools" id="panel-tool">
        <a href="#" data-utils="tools-slide" data-target="#panel-tool"><i class="fa fa-ellipsis-v"></i></a>
        <a href="#" class="btn btn-default">Button 01</a>
        <a href="#" class="btn btn-primary">Button 02</a>
         <a href="#" class="btn btn-success">Button 03</a>
         <a href="#" class="btn btn-info">Button 04</a>
        <a href="#" class="btn btn-warning">Button 05</a>
    </div>

</div>
       <div class="panel-tools" id="panel-tool2">        
        <a href="#" class="btn btn-default">Button 01</a>
        <a href="#" class="btn btn-primary">Button 02</a>
         <a href="#" class="btn btn-success">Button 03</a>
         <a href="#" class="btn btn-info">Button 04</a>
        <a href="#" class="btn btn-warning">Button 05</a>         
    </div>
     <div data-utils="tools-slide" data-target="#panel-tool2">
         <i class="fa fa-ellipsis-h"></i>
    </div>
    
    <div class="panel-body" data-tool-position="left">
              <div class="panel-tools" id="panel-tool3"> 
                  <div class="panel-tools-body">
        <a href="#" class="btn btn-default">Button 01</a>
        <a href="#" class="btn btn-primary">Button 02</a>
         <a href="#" class="btn btn-success">Button 03</a>
         <a href="#" class="btn btn-info">Button 04</a>
        <a href="#" class="btn btn-warning">Button 05</a> 
                      <hr class="line"/>
                  <h3>Hello...

CSS

/* -----------
    PANELS
-------------*/

.panel{
    position:relative;
    margin-top:2em;
  
}
.panel-body{
    min-height:200px;
}

.panel-heading {
    background-image: linear-gradient(to bottom, #F5F4F9 0%, #ECEAF3 100%);
    background-repeat: repeat-x;
    border-bottom: 1px solid #CDCDCD;
    border-radius: 6px 6px 0 0;
    box-shadow: 0 1px 0 #FFF inset;
    padding:0;
    line-height:40px;
    padding-left: 45px;
    position: relative;
    font-size:16px;
    font-weight:800;
    overflow:hidden;
   
}

.panel-heading > [class^="fa-"], 
.panel-heading > [class*=" fa-"]{
    border-right: 1px solid #CDCDCD;
    box-shadow: 1px 0 0 0 #FFF;
    opacity: 0.7;
    padding: 12px 10px 8px;
    position: absolute;
    left: 0;
    top: 0;
    vertical-align:middle;
    height:100%;
    font-size:18px;
    
}
.panel-heading .label,
.panel-heading > .fa{
  line-height: inherit;
}



.panel-tools {
    position: relative;   
    line-height:40px;
    border-bottom: 1px solid #CDCDCD;
    padding:10px;
    background-color: #F5F4F9;
    background-image: linear-gradient(to bottom, #F5F4F9 0%, #ECEAF3 100%);
    background-repeat: repeat-x;       
    transition: all .3s ease;
    -webkit-transition: all .3s ease;
}

.panel-tools.active{  
    height:0px;     
    transition: all .3s ease;
    -webkit-transition: all .3s ease;  
    overflow:hidden;
    padding-top:0;
    padding-bottom:0;
}
.panel-tools-body{
    padding:5px;
}
 .panel-tools p{
     line-height:20px;
 }

.panel-tools .btn, 
.panel-header-tools .btn{
    padding:4px 8px;     
}
[data-utils="tools-slide"]{
   position:relative;  
      display:block;
    height:20px; 
    line-height:20px;
      text-align:center;  
    border-bottom:1px solid #ddd;
     background:rgba(240,240,240,1);    
}
[data-utils="tools-slide"]:hover,
[data-utils="tools-slide"]:focus{
    background:rgba(200,200,200,1);
}

.panel-heading-tools{
    position:absolute;
    right:0;
    top:0;
    display:block;   
   ...

JavaScript

$('[data-utils="tools-slide"]').on('click', function(e){
    var target = $(this).data('target');
   $(target).toggleClass('active'); 
    
});