Give Hide/Show items showing their contents

Question

I am trying to display the contents of the clicked items, I have done this in several menus, but in this one I am having problem because I can not change the existing classes/Divs as it is a new platform that I am working on these items already comes predefined, facilitating some functions that they have to do. I’ve tried several ways but I couldn’t, someone has some idea how to do?

$(document).on('click', '.level-top', function() {
  let posicao = $(this).index(".level-top");
  if ($('.nav-item.level0.nav-' + (posicao) + ' ul').is(':visible')) {
    $('.nav-item.level0.nav-' + (posicao) + ' ul').hide();
  } else {
    $('.level0.nav-submenu.nav-panel--dropdown.nav-panel').hide();
    $('.nav-item.level0.nav-' + (posicao) + ' ul').show();
  }
});

ul.level0 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>

  <li class="nav-item level0 nav-1 level-top first nav-item--parent classic nav-item--only-subcategories parent">
    <a class="level-top">
      <span>Datas Especiais</span>
    </a>
    <ul class="level0 nav-submenu nav-panel--dropdown nav-panel" style="">
      <li class="nav-item level1 nav-1-1 first last classic">
        <a href="/datas-especiais/18-10-dia-do-medico.html"><span>18/10 Dia do médico</span></a>
      </li>
    </ul>
  </li>

  <li class="nav-item level0 nav-2 level-top nav-item--parent classic nav-item--only-subcategories parent">
    <a class="level-top">
      <span>Ocasiões</span>
    </a>
    <ul class="level0 nav-submenu nav-panel--dropdown nav-panel">
      <li class="nav-item level1 nav-2-1 first classic">
        <a href="/ocasioes/parabens.html"><span>Parabéns</span></a>
      </li>
    </ul>
  </li>

  <li class="nav-item level0 nav-3 level-top nav-item--parent classic nav-item--only-subcategories parent">
    <a class="level-top">
      <span>Categorias</span>
    </a>
    <ul class="level0 nav-submenu nav-panel--dropdown nav-panel">
      <li class="nav-item level1 nav-3-1 first last classic">
        <a href="/categorias/bebidas.html"><span>bebidas</span></a>
      </li>
    </ul>
  </li>

  <li class="nav-item level0 nav-4 level-top nav-item--parent classic nav-item--only-subcategories parent">
    <a class="level-top">
      <span>Flores</span>
    </a>
    <ul class="level0 nav-submenu nav-panel--dropdown nav-panel">
      <li class="nav-item level1 nav-4-1 first last classic">
        <a href="/flores/buques.html"><span>Buquês de Flores</span></a>
      </li>
    </ul>
  </li>

  <li class="nav-item level0 nav-5 level-top nav-item--parent classic nav-item--only-subcategories parent">
    <a class="level-top">
      <span>Especiais</span>
    </a>
    <ul class="level0 nav-submenu nav-panel--dropdown nav-panel">
      <li class="nav-item level1 nav-5-1 first last classic">
        <a href="/especiais/hoegaarden.html"><span>Hoegaarden</span></a>
      </li>
    </ul>
  </li>

  <li class="nav-item level0 nav-6 level-top nav-item--parent classic nav-item--only-subcategories parent">
    <a class="level-top">
      <span>Faixas de Preço</span>
    </a>
    <ul class="level0 nav-submenu nav-panel--dropdown nav-panel">
      <li class="nav-item level1 nav-6-1 first last classic">
        <a href="/faixas-de-preco/ate-r-100.html"><span>Até R$100</span></a>
      </li>
    </ul>
  </li>


</ul>

Answer 1

Is that your question? The "Children()" element is used to take direct children in jquery, I added a "$('ul.level0'). Hide();" to hide children who are not children.

$('.level-top').on('click', function() {
  $('ul.level0').hide();
  $(this).children().show();
});

ul.level0 {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>

  <li class="nav-item level0 nav-1 level-top first nav-item--parent classic nav-item--only-subcategories parent">
    <a class="level-top">
      <span>Datas Especiais</span>
    </a>
    <ul class="level0 nav-submenu nav-panel--dropdown nav-panel" style="">
      <li class="nav-item level1 nav-1-1 first last classic">
        <a href="/datas-especiais/18-10-dia-do-medico.html"><span>18/10 Dia do médico</span></a>
      </li>
    </ul>
  </li>

  <li class="nav-item level0 nav-2 level-top nav-item--parent classic nav-item--only-subcategories parent">
    <a class="level-top">
      <span>Ocasiões</span>
    </a>
    <ul class="level0 nav-submenu nav-panel--dropdown nav-panel">
      <li class="nav-item level1 nav-2-1 first classic">
        <a href="/ocasioes/parabens.html"><span>Parabéns</span></a>
      </li>
    </ul>
  </li>

  <li class="nav-item level0 nav-3 level-top nav-item--parent classic nav-item--only-subcategories parent">
    <a class="level-top">
      <span>Categorias</span>
    </a>
    <ul class="level0 nav-submenu nav-panel--dropdown nav-panel">
      <li class="nav-item level1 nav-3-1 first last classic">
        <a href="/categorias/bebidas.html"><span>bebidas</span></a>
      </li>
    </ul>
  </li>

  <li class="nav-item level0 nav-4 level-top nav-item--parent classic nav-item--only-subcategories parent">
    <a class="level-top">
      <span>Flores</span>
    </a>
    <ul class="level0 nav-submenu nav-panel--dropdown nav-panel">
      <li class="nav-item level1 nav-4-1 first last classic">
        <a href="/flores/buques.html"><span>Buquês de Flores</span></a>
      </li>
    </ul>
  </li>

  <li class="nav-item level0 nav-5 level-top nav-item--parent classic nav-item--only-subcategories parent">
    <a class="level-top">
      <span>Especiais</span>
    </a>
    <ul class="level0 nav-submenu nav-panel--dropdown nav-panel">
      <li class="nav-item level1 nav-5-1 first last classic">
        <a href="/especiais/hoegaarden.html"><span>Hoegaarden</span></a>
      </li>
    </ul>
  </li>

  <li class="nav-item level0 nav-6 level-top nav-item--parent classic nav-item--only-subcategories parent">
    <a class="level-top">
      <span>Faixas de Preço</span>
    </a>
    <ul class="level0 nav-submenu nav-panel--dropdown nav-panel">
      <li class="nav-item level1 nav-6-1 first last classic">
        <a href="/faixas-de-preco/ate-r-100.html"><span>Até R$100</span></a>
      </li>
    </ul>
  </li>


</ul>