JSFiddle - React, Tailwind, and code Playground

CSS-Only Sidebar Toggle

by skibulk

HTML

<div class="panel-widget">
  <div class="panel-primary">Map</div>
  <div class="panel-secondary">
    <input type="checkbox" class="panel-toggle-horizontal" id="panel-toggle-horizontal-1" checked>
    <label class="panel-toggle-horizontal" for="panel-toggle-horizontal-1">Toggle Map Filters</label>
    <input type="checkbox" class="panel-toggle-vertical" id="panel-toggle-horizontal-2">
    <label class="panel-toggle-vertical" for="panel-toggle-horizontal-2">Toggle Map Filters</label>
    <div class="panel-inner">
      <div class="checklist">
        <p>MenuItemMenuItemMenuItem</p>
        <p>Menu Item</p>
        <p>Menu Item</p>
        <p>Menu Item</p>
        <p>Menu Item</p>
        <p>Menu Item</p>
        <p>Menu Item</p>
      </div>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

.panel-widget,
.panel-widget .panel-primary,
.panel-widget .panel-secondary,
.panel-widget .panel-inner {
  height: 200px;
  margin: 0;
  border: 0;
  padding: 0;
}

.panel-widget .panel-primary {
  background: lightgray;
}

.panel-widget .panel-secondary {
  position: relative;
}

.panel-widget input.panel-toggle-horizontal,
.panel-widget input.panel-toggle-vertical {
  position: absolute;
  clip: rect(1px, 1px, 1px, 1px);
}

.panel-widget label.panel-toggle-horizontal,
.panel-widget label.panel-toggle-vertical {
  position: absolute;
  width: 30px;
  height: 30px;
  margin: auto;
  padding-left: 30px;
  overflow: hidden;
  background: white url('data:image/gif;base64,R0lGODlhUABQAJEAALe3t1ZWVgAAAP///yH5BAAAAAAALAAAAABQAFAAAAL/nI+py+0Po5y02ouz3rz7D4biSJYggALmagBBIMRy/Kqs5876LgT2fcnxhjMfsAIjKovHCGAJ1f2aimf0GptSW9iuQNu0Ln0pVHIJvomHxoaQmF6ddwHKfEe9z+KOta5+BIfhtwekl6VBSAPExqH4xXIIyCHJMsRnMbSiONlxiEnJA1rBaXIowtOJSidyWpIqomgiGktLYnuCuypVuzOaoYsTDAIbIvvKGuJKsvxRzDyc+DxS+vG5cinMEzmtUWnZfXEIyR098ag6mx0kaEiUDjHek/f+O/C2vTWGib9u3/HoDxkz8tAACegFy78NCBNGWbihYJcXUCB6c/jHgERyaO4cdtrIseOVdAq3uBhXg0EXi1sOgJTBsuWAl4hkWqAZ0qYEnDFb8tSJpAvQoCOH2sECzygDmkmVKmDqNALNqBGwUIXQcNHVBw2bbkUQ0OtXsOHGuslo9pwMsWnbun0LN67cuXTrLigAADs=') no-repeat;
  background-size: cover;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
}

.panel-widget .panel-inner {
  overflow-y: auto;
  padding: 10px;
}

.panel-widget .checklist {
  overflow-x: hidden;
}

@media (max-width: 599px) {
  .panel-widget .panel-toggle-horizontal {
    display: none;
  }
  .panel-widget label.panel-toggle-vertical {
    left: 0;
    right: 0;
    top: -35px;
  }
  .panel-widget input.panel-toggle-vertical:not(:checked) ~ .panel-inner {
    display: none;
  }
}

@media (min-width: 600px) {
  .panel-widget {
    display: table;
    border-collapse: collapse;
    font-size: 0;
    line-height: 0;
  }
  .panel-widget .panel-primary,
  .panel-widget .panel-secondary {
   ...

JavaScript

document.getElementsByTagName('label')[0].onclick = function() {
  console.log(document.getElementById('toggle-filters-1').checked);
}