JSFiddle - React, Tailwind, and code Playground

by Dug Sohn

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.css">
<script src="https://momentjs.com/downloads/moment.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-daterangepicker/2.1.25/daterangepicker.js"></script>
<div class="container-fluid mini-nav">
  <br>
  <h4>
Show Folders Button
</h4>

  <div class="form-group clearfix">
    <label class="col-md-4 control-label">
      <!-- react-text: 69 -->
      <!-- /react-text -->
      <!-- react-text: 70 -->Folders
      <!-- /react-text -->
    </label>
    <div class="col-md-8 form-control-value">
    <div class="ui-yakabox-link"><i class="fa fa-folder"></i> 
    Sync Drive <i class="fa fa-remove"></i>
    </div>
    <br>
      <div class="btn-toolbar">
        <div class="btn-group">
          <a class="btn btn-sm btn-default btn-folder" style="margin-left: 5px; cursor: pointer;"><i class="fa fa-folder"></i> 
<span class="btn-label">Show</span> Folders</a>
        </div>
        <div class="tools hide">

<div class="btn-group">
          <div class="" aria-label="Folder Display Options">
            <button class="btn btn-default btn-sm ui-expandall" style="cursor: pointer;"><span class="fa fa-chevron-down"></span>
              <!-- react-text: 203 -->Expand
              <!-- /react-text -->
            </button>
            <button class="btn btn-default btn-sm ui-collapseall" style="cursor: pointer;"><span class="fa fa-chevron-up"></span>
              <!-- react-text: 206 -->Collapse
              <!-- /react-text -->
            </button>
          </div>
   ...

CSS

.form-group {
  border-top: 1px solid #ececec;
  padding-top: 10px;
  padding-bottom: 10px;
  border-bottom: 1px solid #ececec;
}

.fa-folder {
  color: gold;
}

.fa-square-o {
  color: #ccc;
  margin-right: 5px;
}
.fa-check-square {
  color: red;
  margin-right: 5px;
}

.ui-yakabox-link {
  background-color: rgba(5, 165, 209, .2);
  border-radius:3px;
  padding:10px 15px;
  display: table-cell;
  margin:5px;
}
br {height:5px; display:block}

JavaScript

$('.btn-folder').on("click", function() {

  $('.tools').toggleClass('hide');

  if ($('.btn-label').text() == "Show") {
    $('.btn-label').text('Hide');
  } else {
    $('.btn-label').text('Show');

  }

});