JSFiddle - React, Tailwind, and code Playground

by Qwerty_Wasd

HTML

<ul>
  <li class="has_submenu">
    <a href="#">Refine by 1 <i class="fa fa-plus"></i></a>
    <ul class="refinement-submenu">
      <li><a href="">Silverstone</a></li>
      <li><a href="">Prestwold Hall</a></li>
    </ul>
  </li>
  <li class="has_submenu">
    <a href="#">Refine by 2 <i class="fa fa-plus"></i></a>
    <ul class="refinement-submenu">
      <li><a href="">?25</a></li>
      <li><a href="">?50</a></li>
    </ul>
  </li>
  <li class="has_submenu">
    <a href="#">Refine by 3 <i class="fa fa-plus"></i></a>
    <ul class="refinement-submenu">
      <li><a href="">London</a></li>
      <li><a href="">South West</a></li>
    </ul>
  </li>
</ul>

CSS

.has_submenu .refinement-submenu {
  display: none;
}

JavaScript

$(".has_submenu a").click(function(e) {
  e.preventDefault();
  var $subs = $(".refinement-submenu").stop();
  var $currentSub = $(this).next(".refinement-submenu").slideToggle();
  $subs.not($subs.has(this)).not($currentSub).slideUp();
});