How to hide content on click outside of an element?

Question

I'm doing a filter menu dropdown, and I need to hide the menu content by clicking outside of the content, I did a jquery function for this so I can use it in many filter menu, but right now if I click outside of the content is hidding all the filters where I use the function.

My code:

showMeMore = (showContent, hideContent, content) => {

    $(showContent).show();
    $(hideContent).hide();

    $(showContent).on('click', function() {
      $(content).slideToggle();
      $(showContent).hide();
      $(hideContent).show();
    });

    $(hideContent).on('click', function(e) {
      e.preventDefault();
      $(content).slideToggle();
      $(showContent).show();
      $(hideContent).hide();
    });

    $('html').click(function(e) {
      if (e.target.id == content) {
        $(content).show();
      } else {
        $(content).hide();
      }
    });

    showMeMore(".__collapser--quantity", ".__collapser--quantity--close",
      "#__selector--quantity");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container__flex--between filter__top__box filter__top__box-quantity container__position--absolute">
  <div class="__selection--box">
    <span class="__title container__flex--between">Mostrar
            <i class="__collapser--quantity" data-feather="chevron-down"></i>
            <i class="__collapser--quantity--close" data-feather="chevron-up"></i>
        </span>
    <ul id="__selector--quantity" class="__select">
      <li class="__option"><a href="#" class="__anchor">12 productos</a></li>
      <li class="__option"><a href="#" class="__anchor">24 productos</a></li>
      <li class="__option"><a href="#" class="__anchor">48 productos</a></li>
      <li class="__option"><a href="#" class="__anchor">96 productos</a></li>
      <li class="__option"><a href="#" class="__anchor">Todos</a></li>
    </ul>
  </div>
</div>

The correct result of this should only hide the content of a unique menu by clicking outside of the content.

Answer 1

You have several issues in your jQuery with closing braces, etc. I have fixed those.

If you are using the "showMeMore" function in a few places, ensure you are using different ids for content.

By referencing classes in respect to the parent, you will only be affecting that instance. I changed the code significantly and will add some comments.

showMeMore = (showContent, hideContent, content) => {

  var parent = $(content).closest('.__selection--box');

  $(parent).find(showContent).show();
  $(parent).find(hideContent).hide();

  $(parent).find(showContent).on('click', function(e) {
    e.preventDefault();
    var parent = $(this).closest('.__selection--box');
    $(parent).find(content).slideToggle();
    $(parent).find(showContent).hide();
    $(parent).find(hideContent).show();
  });

  $(parent).find(hideContent).on('click', function(e) {
    e.preventDefault();
    var parent = $(this).closest('.__selection--box');
    $(parent).find(content).slideToggle();
    $(parent).find(showContent).show();
    $(parent).find(hideContent).hide();
  });

  $('html').click(function(e) {
    if (e.target.getAttribute('class') !== '__selection--box' && e.target.getAttribute('class') !== showContent.replace('.', '') && e.target.getAttribute('class') !== hideContent.replace('.', '') && $(content + ':visible').length > 0) {
      $(parent).find(content).slideToggle();
      $(parent).find(showContent).toggle();
      $(parent).find(hideContent).toggle();
    }
  });
}


showMeMore(".__collapser--quantity", ".__collapser--quantity--close",
  "#__selector--quantity");

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container__flex--between filter__top__box filter__top__box-quantity container__position--absolute">
  <div class="__selection--box">
    <span class="__title container__flex--between">Mostrar
            <i class="__collapser--quantity" data-feather="chevron-down">v</i>
            <i class="__collapser--quantity--close" data-feather="chevron-up">^</i>
        </span>
    <ul id="__selector--quantity" class="__select">
      <li class="__option"><a href="#" class="__anchor">12 productos</a></li>
      <li class="__option"><a href="#" class="__anchor">24 productos</a></li>
      <li class="__option"><a href="#" class="__anchor">48 productos</a></li>
      <li class="__option"><a href="#" class="__anchor">96 productos</a></li>
      <li class="__option"><a href="#" class="__anchor">Todos</a></li>
    </ul>
  </div>
</div>