Give Hide / Show and show items content of the clicked item

Navigation
1

I want to show / hide the div by clicking on it and hiding when clicking on another item, I'm just able to hide when clicking on another item, when clicking on it, I can not hide it.

Example of how the code is 

    $(document).on('click', '.opener', function() {
    let posicao = $(this).index(".opener");
        $('.level0.nav-submenu.nav-panel--dropdown.nav-panel').hide();
        if ($('.nav-item.level0.nav-' + (posicao+1) + ' ul').is(':visible')) {
        $('.nav-item.level0.nav-' + (posicao+1) + ' ul').hide(); 
        } else {
        $('.nav-item.level0.nav-' + (posicao+1) + ' ul').show();
        }
    });
    
.opener {
  cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><navid="mainmenu" class="navi opt-fx-fade-inout opt-sb0 opt-sob opt-hide480 centered with-bullets nav-mobile acco nav-mobile-triggerable">
<ul>      
    
	<li class="nav-item level0 nav-1">
	<span>Datas Especiais</span>
	<span class="opener">\/</span>
	<ul class="level0 nav-submenu nav-panel--dropdown nav-panel" style="display: none;">
	<li class="nav-item classic">
	<span>teste1</span></li></ul></li>

	<li class="nav-item level0 nav-2">
	<span>Ocasiões</span>
	<span class="opener">\/</span>
	<ul class="level0 nav-submenu nav-panel--dropdown nav-panel" style="display: none;">
	<li class="nav-item classic">
	<span>teste2</span></li></ul></li>

	<li class="nav-item level0 nav-3">
	<span>Categorias</span>
	<span class="opener">\/</span>
	<ul class="level0 nav-submenu nav-panel--dropdown nav-panel" style="display: none;">
	<li class="nav-item classic">
	<span>test3</span></li></ul></li>

	<li class="nav-item level0 nav-4">
	<span>Flores</span>
	<span class="opener">\/</span>
	<ul class="level0 nav-submenu nav-panel--dropdown nav-panel" style="display: none;">
	<li class="nav-item classic">
	<span>teste4</span></li></ul></li>

</ul>
</nav>
    
asked by anonymous 13.10.2017 / 19:03

3 answers

1

I changed the logic in the code by putting the hide that was above the IF, inside the if, as it hid all the elements when being clicked independent of the IF it was as if the other execution in line 4 did not take effect, since it would not be visible always by hiding before and displaying soon after in the else. 

    $(document).on('click', '.opener', function() {
    let posicao = $(this).index(".opener");
        if ($('.nav-item.level0.nav-' + (posicao+1) + ' ul').is(':visible')) {
        $('.nav-item.level0.nav-' + (posicao+1) + ' ul').hide(); 
        } else {
        $('.level0.nav-submenu.nav-panel--dropdown.nav-panel').hide();
        $('.nav-item.level0.nav-' + (posicao+1) + ' ul').show();
        }
    });
    
.opener {
  cursor:pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><navid="mainmenu" class="navi opt-fx-fade-inout opt-sb0 opt-sob opt-hide480 centered with-bullets nav-mobile acco nav-mobile-triggerable">
<ul>      
    
	<li class="nav-item level0 nav-1">
	<span>Datas Especiais</span>
	<span class="opener">\/</span>
	<ul class="level0 nav-submenu nav-panel--dropdown nav-panel" style="display: none;">
	<li class="nav-item classic">
	<span>teste1</span></li></ul></li>

	<li class="nav-item level0 nav-2">
	<span>Ocasiões</span>
	<span class="opener">\/</span>
	<ul class="level0 nav-submenu nav-panel--dropdown nav-panel" style="display: none;">
	<li class="nav-item classic">
	<span>teste2</span></li></ul></li>

	<li class="nav-item level0 nav-3">
	<span>Categorias</span>
	<span class="opener">\/</span>
	<ul class="level0 nav-submenu nav-panel--dropdown nav-panel" style="display: none;">
	<li class="nav-item classic">
	<span>test3</span></li></ul></li>

	<li class="nav-item level0 nav-4">
	<span>Flores</span>
	<span class="opener">\/</span>
	<ul class="level0 nav-submenu nav-panel--dropdown nav-panel" style="display: none;">
	<li class="nav-item classic">
	<span>teste4</span></li></ul></li>

</ul>
</nav>
    
13.10.2017 / 19:22
3

If I have correctly understood what you want to do, you can greatly simplify your logic by using only the toggle function of Jquery . To do this you only have to start from the element where you clicked and get to what you want to hide by calling next : 

$(document).on('click', '.opener', function() {
  $(this).next().toggle(); 
});

The $(this) part of the element clicked on the .opener and with next() reaches the <ul> you want to display.

Example: 

$(document).on('click', '.opener', function() {
  $(this).next().toggle();
});
.opener {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><navid="mainmenu" class="navi opt-fx-fade-inout opt-sb0 opt-sob opt-hide480 centered with-bullets nav-mobile acco nav-mobile-triggerable">
  <ul>

    <li class="nav-item level0 nav-1">
      <span>Datas Especiais</span>
      <span class="opener">\/</span>
      <ul class="level0 nav-submenu nav-panel--dropdown nav-panel" style="display: none;">
        <li class="nav-item classic">
          <span>teste1</span></li>
      </ul>
    </li>

    <li class="nav-item level0 nav-2">
      <span>Ocasiões</span>
      <span class="opener">\/</span>
      <ul class="level0 nav-submenu nav-panel--dropdown nav-panel" style="display: none;">
        <li class="nav-item classic">
          <span>teste2</span></li>
      </ul>
    </li>

    <li class="nav-item level0 nav-3">
      <span>Categorias</span>
      <span class="opener">\/</span>
      <ul class="level0 nav-submenu nav-panel--dropdown nav-panel" style="display: none;">
        <li class="nav-item classic">
          <span>test3</span>
        </li>
      </ul>
    </li>

    <li class="nav-item level0 nav-4">
      <span>Flores</span>
      <span class="opener">\/</span>
      <ul class="level0 nav-submenu nav-panel--dropdown nav-panel" style="display: none;">
        <li class="nav-item classic">
          <span>teste4</span>
        </li>
      </ul>
    </li>

  </ul>
</nav>

In this way, only the ones we click directly will be closed. If you click one and then another, the first does not close. In order to contemplate this case it is necessary to change the logic a bit, closing the others only when it will show a new one. 

$(document).on('click', '.opener', function() {
  if(!$(this).next().is(":visible"))
    $('.level0.nav-submenu.nav-panel--dropdown.nav-panel').hide();
  
  $(this).next().toggle();
});
.opener {
  cursor: pointer;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><navid="mainmenu" class="navi opt-fx-fade-inout opt-sb0 opt-sob opt-hide480 centered with-bullets nav-mobile acco nav-mobile-triggerable">
  <ul>

    <li class="nav-item level0 nav-1">
      <span>Datas Especiais</span>
      <span class="opener">\/</span>
      <ul class="level0 nav-submenu nav-panel--dropdown nav-panel" style="display: none;">
        <li class="nav-item classic">
          <span>teste1</span></li>
      </ul>
    </li>

    <li class="nav-item level0 nav-2">
      <span>Ocasiões</span>
      <span class="opener">\/</span>
      <ul class="level0 nav-submenu nav-panel--dropdown nav-panel" style="display: none;">
        <li class="nav-item classic">
          <span>teste2</span></li>
      </ul>
    </li>

    <li class="nav-item level0 nav-3">
      <span>Categorias</span>
      <span class="opener">\/</span>
      <ul class="level0 nav-submenu nav-panel--dropdown nav-panel" style="display: none;">
        <li class="nav-item classic">
          <span>test3</span>
        </li>
      </ul>
    </li>

    <li class="nav-item level0 nav-4">
      <span>Flores</span>
      <span class="opener">\/</span>
      <ul class="level0 nav-submenu nav-panel--dropdown nav-panel" style="display: none;">
        <li class="nav-item classic">
          <span>teste4</span>
        </li>
      </ul>
    </li>

  </ul>
</nav>
    
13.10.2017 / 19:16
1

I do not know if the crowd has answered, so I'll leave my contribution. I believe the solution below is simpler, cleaner and easier to understand / program. There are no needs for ifs or tests in general; pure tree manipulation. ( Link to view in Codepen ) 

// Espera o documento ser carregado
$( document ).ready(function() {
  
  // Atribui um callback ao evento click em todos os elementos .show-content
  $(".show-content").click(function() {
    
    // Obtém e salva o elemento que será trabalhado (Escondido ou mostrado)
    content_div = $(this).parent().find(".content");
    
    // Esconde todos os elementos, EXCETO (not) o elemento em que se está trabalhando
    $("div.menu > div > div.content").not(content_div).addClass("hidden");
    
    // Alterna, sem a necessidade de if, a visibilidade do elemento
    $(this).parent().find(".content").toggleClass("hidden");
  });
});
div.menu > div > span.title{
  font-size: 30px;
}

div.menu > div > span.show-content{
  color: blue;
  cursor: pointer;
}

.hidden {
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="menu">
  
  <div>
    <span class="title">Título 1</span> <span class="show-content">Ver mais</span>
    <div class="content hidden">
      Conteúto 1
    </div>
  </div>
  
  <div>
    <span class="title">Título 2</span> <span class="show-content">Ver mais</span>
    <div class="content hidden">
      Conteúto 2
    </div>
  </div>
  
  <div>
    <span class="title">Título 3</span> <span class="show-content">Ver mais</span>
    <div class="content hidden">
      Conteúto 3
    </div>
  </div>
  
</div>
    
13.10.2017 / 20:14
Twitter data and blocked account vitrification [duplicate] Uncaught TypeError: Can not read property 'validDocument' of undefined