jQuery addClass example

Change class name on click in jQuery

by D7460N

HTML

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
<script src="https://unpkg.com/[email protected]/dist/simplebar.js"></script>
<script src="https://rawgit.com/RickStrahl/jquery-resizable/master/src/jquery-resizable.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<body class="container-fluid d-flex flex-column px-0">
  <div class="page-footer p-2">HEADER</div>
  <main class="row flex-fill no-gutters flex-nowrap">
    <div class="col column01 d-flex flex-column">COLUMN01</div>
    <div class="col panel-container">
      <div class="row no-gutters flex-nowrap">
        <div class="col column02 d-flex flex-column resizable">COLUMN02</div>
        <div class="col splitter d-flex flex-column"></div>
        <div class="col column03 d-flex flex-column">COLUMN03</div>
      </div>
    </div>
    <div class="col column01 d-flex flex-column">COLUMN04</div>
  </main>
  <div class="page-footer p-2">FOOTER</div>
</body>

CSS

html,
body {
  min-height: 100vh;
  /* force footer to bottom of browser */
  height: 100%;
  /*for IE11*/
}

.page-header,
.page-footer {
  padding: 20px 10px;
  background-color: rgba(0, 0, 0, 0.4);
}

.column01 {
  flex: 0 0 200px;
  background-color: rgba(0, 0, 0, 0.1);
}
.panel-container {
  display: flex;
  flex-direction: row;
  border: 1px solid silver;
  overflow: hidden;
  
  /* avoid browser level touch actions */
  xtouch-action: none;
}
    .column02 {
      background-color: rgba(0, 0, 0, 0.2);
      flex: 0 0 auto;
    }
    .splitter {
      cursor: col-resize;
      background: url(https://raw.githubusercontent.com/RickStrahl/jquery-resizable/master/assets/vsizegrip.png) center center no-repeat rgba(0, 0, 0, 0.3);
      flex: 0 0 10px;
    }
    .column03 {
      background-color: rgba(0, 0, 0, 0.3);
     flex: 1 1 auto;
    }

JavaScript

// handle flex box splitter
$(document).ready(function() {
    $(".resizable").resizable({
        handleSelector: ".splitter",
        resizeHeight: false
    });
});