JSFiddle - React, Tailwind, and code Playground

by Ed Bulikyan

HTML

<label for="category" class="filter">Filter</label>

<aside class="sidebar">

<input name="accordion" id="category" type="checkbox" value="1" class="input-accordion">


  <div class="accordion">
    <div class="accordion__head">
      <h5 class="accordion__title">Brand</h5>
    </div>
    <div class="accordion__body">
      <ul class="check-list">
        <li class="check-list__item">
          <input name="accordion" type="checkbox" id="checklist1" value="0">
          <label for="checklist1" class="check-list__text">Lacodt</label>
        </li>
        <li class="check-list__item">
          <input name="accordion" type="checkbox" id="checklist2" value="1">
          <label for="checklist2" class="check-list__text">Price</label>
        </li>
        <li class="check-list__item">
          <input name="accordion" type="checkbox" id="checklist3" value="2">
          <label for="checklist3" class="check-list__text">Style</label>
        </li>
      </ul>
    </div>
  </div>
</aside>

SASS

.input-accordion
  width: 1px
  height: 1px
  margin-bottom: 9px

.filter 
  height: 60px
  background-color: #ececec
  border: 1px solid silver
  padding: 5px
  outline: none


.toggle-filter 
  width: 60px
  height: 60px

.accordion
  border: 1px solid silver
  width: 150px

.sidebar
  display: none

.input-accordion:checked + .sidebar
  display: block