JSFiddle - React, Tailwind, and code Playground

by dwaynie

HTML

<div id="side-menu">
      <h3>Narrow by</h3>
      <ul id="narrow-by">
        <li class="toggleable">
          <a href="#">
            <h4>Deals</h4>
          </a>
          <ul>
            <li>
              <input type="checkbox">
              <label>Sale <span>(0)</span></label>
            </li>
            <li>
              <input type="checkbox">
              <label>Clearance <span>(0)</span></label>
            </li>
          </ul>
        </li>
        <li class="toggleable">
          <a href="#">
            <h4>Size grouping</h4>
          </a>
          <ul>
            <li>
              <input type="checkbox">
              <label>Junior <span>(0)</span></label>
            </li>
            <li>
              <input type="checkbox">
              <label>Maternity <span>(0)</span></label>
            </li>
            <li>
              <input type="checkbox">
              <label>Petite <span>(0)</span></label>
            </li>
            <li>
              <input type="checkbox">
              <label>Plus <span>(0)</span></label>
            </li>
          </ul>
        </li>
        <li class="toggleable">
          <a href="#">
            <h4>Style</h4>
          </a>
          <ul>
            <li>
              <input type="checkbox">
              <label>Fashion top <span>(0)</span></label>
            </li>
            <li>
              <input type="checkbox">
              <label>Hoodie <span>(0)</span></label>
            </li>
            <li>
              <input type="checkbox">
              <label>Peasant top <span>(0)</span></label>
            </li>
            <li>
              <input type="checkbox">
              <label>Tunic <span>(0)</span></label>
            </li>
            <li>
              <input type="checkbox">
              <label>Turtleneck <span>(0)</span></label>
            </li>
          </ul>
        </li>
        <li class="toggleable">
          <a href="#">
            <h4>Color</h4>
        ...

CSS

#side-menu { clear: left; float: left; width: 140px; margin: 20px 20px 0 0; line-height: 20px; }
#side-menu h3 { font-size: 14px; }
#side-menu h3, #side-menu h4, #side-menu #all-categories, #side-menu #your-selections a { text-transform: lowercase; }
#side-menu h3, #side-menu #your-selections > h4 { padding: 20px 0 5px; }

#side-menu #all-categories, #side-menu #your-selections > a { font-weight: bold; }
#side-menu #all-categories, #side-menu #all-categories a:hover { color: #000; }

#side-menu #all-categories { font-size: 14px; line-height: 23px; }
#side-menu #all-categories a, #side-menu .toggleable label span, #side-menu #your-selections a { color: #999; }
#side-menu #your-selections a, #side-menu .toggleable label { font-size: 11px; }

#side-menu #your-selections a { float: right; }
#side-menu #your-selections > a { margin-top: -24px; }
#side-menu #your-selections > ul > li { font-size: 11px; margin-bottom: 5px; }
#side-menu #your-selections > ul > li:last-child { margin-bottom: 0; }
#side-menu .toggleable { margin-bottom: 5px; }
#side-menu .toggleable > ul { margin-bottom: 15px; }
#side-menu .toggleable > a > h4 { background: url(http://home.no/dwaynie/arrow_right.png) no-repeat left 6px; width: 8px; padding: 0 0 2px 18px; white-space: nowrap; text-transform: lowercase; }
#side-menu .toggleable > a > h4.hide { background: url(http://home.no/dwaynie/arrow_down.png) no-repeat left 7px; width: 11px; }
#side-menu .toggleable input { position: relative; top: 3px; margin-right: 2px; }

JavaScript

// Toggleable side menu
    //
    $("li.toggleable > a > h4").click(function(event) {
      event.preventDefault();

      var $toggleable = $(this).closest(".toggleable").children("ul");

      if ($toggleable.is(":hidden")) {
        $(this).addClass("hide");
      } else {
        $(this).removeClass("hide");
      }
      $toggleable.slideToggle("fast");
    });

    // Some sections should start hidden
    //
    $(".start-hidden").each(function() {
      $(this).hide();
    });

    // Sections that do not start hidden should display
    // arrow_down.png instead of arrow_right.png.
    //
    // Thanks cmwelsh
    //
    $("li.toggleable > a > h4").closest('li').find("ul:not(.start-hidden)").closest('li').find('h4').addClass('hide');