JSFiddle - React, Tailwind, and code Playground

Accordion settings

by Hugo Carneiro

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.0/jquery-ui.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css">
<ul class="nav nav-tabs" role="tablist">
  <li role="presentation" class="active"><a href="#panels" aria-controls="panels" role="tab" data-toggle="tab">Set up accordion</a></li>
  <li role="presentation" id="a-settings" class="disable"><a href="#settings" aria-controls="settings" role="tab" data-toggle="tab">Settings</a></li>
</ul>
<div class="col-xs-12 tab-content">
  <div role="tabpanel" class="tab-pane-content tab-pane active" id="panels">
    <div class="hidden" id="panel-holder">
      <div class="panel-group ui-sortable" id="accordion">
        <div class="panel panel-default" data-id="HAv67nCU">
          <div class="panel-heading ui-sortable-handle">
            <h4 class="panel-title" data-toggle="collapse" data-parent="#accordion" data-target="#collapse-1"><span class="glyphicon glyphicon-chevron-down"></span><span class="panel-title-text">Accordion panel 1</span></h4>
            <a href="#"><span class="icon-delete glyphicon glyphicon-remove"></span></a>
            <span class="icon-sort glyphicon glyphicon-resize-vertical"></span>
          </div>

          <div id="collapse-1" class="panel-collapse collapse in">
            <div class="panel-body">
              <div class="form-horizontal">

                <div class="form-group">
                  <div class="col-xs-4 control-label">
                    <label for="list-item-title-HAv67nCU">Title</label>
                  </div>

                  <div class="col-xs-8">
                    <input type="text"...

CSS

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700);
html,
body {
  font-family: "Open Sans", "Helvetica Neue", Arial, Helvetica, sans-serif;
  background-color: #f2f6f7;
}

/* TABS */
.nav-tabs > li.disable {
  pointer-events: none;
}

.nav-tabs > li.disable > a {
  color: #999 !important;
}

.nav > li > a,
.nav > li > a:focus,
.nav > li > a:hover {
  color: #333 !important;
  border: 0px;
  border-bottom: 4px solid transparent;
  background: none;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
  color: #333;
  border: 0px;
  border-bottom: 4px solid #00abd2;
  background: none;
}

.tab-content {
  padding: 20px;
  height: 600px;
  overflow: auto;
}

.panel-group {
  margin: 10px 0;
  -webkit-user-select: none;
}

.panel {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1);
  -webkit-transition: opacity 100ms linear, -webkit-transform 100ms linear;
  background-color: #f2f6f7;
}

.panel.focus {
  opacity: 1;
  -webkit-transform: translate3d(0, 0, 0) scale(1.03);
}

.panel-group .panel {
  border-radius: 6px;
  overflow: hidden;
}

.panel.focus .glyphicon-remove {
  opacity: 0 !important;
  -webkit-transition: opacity 50ms linear;
}

.panel-default {
  border-color: #d3dbde;
}

.panel-default > .panel-heading {
  background-color: #e4e9eb;
  border-color: #d3dbde;
}

.panel-heading {
  position: relative;
  padding: 0;
}

.panel-heading:hover {
  cursor: -webkit-grab;
  cursor: -moz-grab;
}

.panel-heading h4 {
  padding: 10px 15px;
  width: 90%;
}

.panel-heading .glyphicon-chevron-right,
.panel-heading .glyphicon-chevron-down {
  margin-right: 10px;
}

.panel-title .glyphicon {
  cursor: pointer;
}

.panel-heading .glyphicon-remove {
  position: absolute;
  right: 30px;
  padding: 10px 12px;
  opacity: 0;
  color: #E60000;
  width: auto;
}

.panel-heading:hover .glyphicon-remove {
  opacity: 1;
}

.panel-heading .icon-sort {
  position: absolute;
  right: 0px;
  padding: 10px...

JavaScript

checkAllowOpenPanels();

$('.start-item').on('click', function() {
	$('#initial-holder').addClass('hidden');
  $('#panel-holder').removeClass('hidden');
  $('#a-settings').removeClass('disable');
});

// SORTING PANELS
$('.panel-group').sortable({
  handle: ".panel-heading",
  cancel: ".icon-delete",
  tolerance: 'pointer',
  revert: 150,
  placeholder: 'panel panel-default placeholder tile',
  cursor: '-webkit-grabbing; -moz-grabbing;',
  axis: 'y',
  start: function(event, ui) {
    $('.panel-collapse.in').collapse('hide');
    ui.item.addClass('focus').css('height', ui.helper.find('.panel-heading').outerHeight() + 2);
    $('.panel').not(ui.item).addClass('faded');
  },
  stop: function(event, ui) {
    ui.item.removeClass('focus');
    $('.panel').not(ui.item).removeClass('faded');
    checkAllowOpenPanels();
  },
  sort: function(event, ui) {
    $('.panel-group').sortable('refresh');
    $('.tab-content').trigger('scroll');
  }
});

// ACCORDION ARROWS
$('#accordion').on('show.bs.collapse', '.panel-collapse', function() {
  $(this).siblings('.panel-heading').find('.glyphicon-chevron-right').removeClass('glyphicon-chevron-right').addClass('glyphicon-chevron-down');
}).on('hide.bs.collapse', '.panel-collapse', function() {
  $(this).siblings('.panel-heading').find('.glyphicon-chevron-down').removeClass('glyphicon-chevron-down').addClass('glyphicon-chevron-right');
}).on('shown.bs.collapse hidden.bs.collapse', '.panel-collapse', function() {
  $('.tab-content').trigger('scroll');
});

// CONTROLS
var tabContentHeight = $('.tab-content').height() + 40;
$('.tab-content').scroll(function(event) {
  var tabContentScrollPos = Math.abs($('.tab-pane-content').position().top);
  var tabPaneHeight = $('.tab-pane-content').height();

  if (tabPaneHeight - tabContentScrollPos > tabContentHeight) {
    $('body').addClass('controls-sticky-on');
    $('.controls-sticky').css('bottom', 0 - $(this).scrollTop());
  } else {
    $('body').removeClass('controls-sticky-on');
 ...