Give Hide/Show and show only contents of the clicked item

Asked

Viewed 285 times

1

I want to show/hide the div by clicking on it and hide by clicking on another item, I am only able to hide by clicking on another item, by clicking on it I am not able to hide.

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>
<nav id="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>

jquery html

  • the question to me is a little confused, I do not know if others agree, but would consider editing and inserting part of the code within the question.

  • I edited the question and made it simpler, I think you better understand, running the code I put I think gives to have a notion.

  • @Wagnerfernandomomesso The code is already in the executable, I would like me to put it again?

3 answers

3

If I have understood correctly what you want to do, you can simplify your logic by using only the function toggle jquery. For this you only have to start from the element where you clicked and arrive at what you want to hide by calling the next:

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

The $(this) part of the element clicked o .opener and with next() reaches the <ul> who wants to show.

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>
<nav id="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>

This way it will cause only those that we click directly to be closed. If you click one and then the first one does not close. To contemplate this case it is already necessary to change a little logic, closing the others only when will show a new.

$(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>
<nav id="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>

  • 1

    Missing only hide when clicking on the other elements.

  • 1

    @Correct Brenocosta! Thank you for the comment.

  • I managed to do, I was wrong on a little something, but now does exactly what I need, I will post the answer here, thank you very much.

1


I switched the logic in the code by placing the Hide that was above the IF, inside the if, as it hid all the elements when being clicked independent of the IF was as if the other execution on line 4 had no effect, because I wouldn’t always be visible by hiding before and displaying right after in Isis.

    $(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>
<nav id="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>

1

I don’t know if the guys have answered yet, so I’ll leave my contribution. I believe the solution below is simpler, cleaner and easier to understand/program. There is no need for ifs or tests in general; only 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>
<div class="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>

Browser other questions tagged jquery html

You are not signed in. Login or sign up in order to post.