How to show each item of
?

Question

I am creating a menu where your content is displayed via a modal. As part li is unique (has neither an id and nor a class), then jQuery will capture the last element declared.

$(document).ready(function(){
  $('.menu li').click(function(){
    $('.item_modal').addClass('open');
 });

 $('.modal_btn_fechar').click(function(){
   $('.item_modal').removeClass('open');
  });
});

html, body{
 width: 100%;
 height: 100%;
 padding: 0;
 margin: 0;
 background-color: red;
}

.menu{
 position: absolute;
}

.item_modal{
 position: fixed;
 width: 100%;
 height: 100%;
 background: black;
 color: white;
 transform: translateY(-100%);
 transition: transform 0.4s ease-in-out;
}

.open{
 z-index: 999;
 transform: translateY(0%);
 transition: transform 0.4s ease-in-out;
}

<div class="menu">
<ul>
 <li>ITEM 1</li>
 <li>ITEM 2</li>
 <li>ITEM 3</li> 
</ul>
</div>

<div class="item_modal">
<center>
  <h1> ITEM 1 </h1> <h1 class="modal_btn_fechar"> X </h1>

  <p>Todos as descrições das pessoas são sobre a humanidade do atendimento, a pessoa pega no pulso, examina, olha com carinho. Então eu acho que vai ter outra coisa, que os médicos cubanos trouxeram pro brasil, um alto grau de humanidade.<br><br>

 Eu dou dinheiro pra minha filha. Eu dou dinheiro pra ela viajar, então é... é... Já vivi muito sem dinheiro, já vivi muito com dinheiro. -Jornalista: Coloca esse dinheiro na poupança que a senhora ganha R$10 mil por mês. -Dilma: O que que é R$10 mil?<br><br>

 A população ela precisa da Zona Franca de Manaus, porque na Zona franca de Manaus, não é uma zona de exportação, é uma zona para o Brasil. Portanto ela tem um objetivo, ela evita o desmatamento, que é altamente lucravito. Derrubar arvores da natureza é muito lucrativo!<br><br>

    Ai você fala o seguinte: "- Mas vocês acabaram isso?" Vou te falar: -"Não, está em andamento!" Tem obras que "vai" durar pra depois de 2010. Agora, por isso, nós já não desenhamos, não começamos a fazer projeto do que nós "podêmo fazê"? 11, 12, 13, 14... Por que é que<br><br> não?

 No meu xinélo da humildade eu gostaria muito de ver o Neymar e o Ganso. Por que eu acho que.... 11 entre 10 brasileiros gostariam. Você veja, eu já vi, parei de ver. Voltei a ver, e acho que o Neymar e o Ganso têm essa capacidade de fazer a gente olhar.<br><br>

 A única área que eu acho, que vai exigir muita atenção nossa, e aí eu já aventei a hipótese de até criar um ministério. É na área de... Na área... Eu diria assim, como uma espécie de analogia com o que acontece na área agrícola.<br><br>

 Se hoje é o dia das crianças... Ontem eu disse: o dia da criança é o dia da mãe, dos pais, das professoras, mas também é o dia dos animais, sempre que você olha uma criança, há sempre uma figura oculta, que é um cachorro atrás. O que é algo muito importante!<br><br>
  </p>
</center>
</div>

<div class="item_modal">
<center>
 <h1> ITEM 2 </h1> 
 <h1 class="modal_btn_fechar"> X </h1>

 <p>No meu xinélo da humildade eu gostaria muito de ver o Neymar e o Ganso. Por que eu acho que.... 11 entre 10 brasileiros gostariam. Você veja, eu já vi, parei de ver. Voltei a ver, e acho que o Neymar e o Ganso têm essa capacidade de fazer a gente olhar.<br><br>

 Eu dou dinheiro pra minha filha. Eu dou dinheiro pra ela viajar, então é... é... Já vivi muito sem dinheiro, já vivi muito com dinheiro. -Jornalista: Coloca esse dinheiro na poupança que a senhora ganha R$10 mil por mês. -Dilma: O que que é R$10 mil?<br><br>

 Se hoje é o dia das crianças... Ontem eu disse: o dia da criança é o dia da mãe, dos pais, das professoras, mas também é o dia dos animais, sempre que você olha uma criança, há sempre uma figura oculta, que é um cachorro atrás. O que é algo muito importante!<br><br>

 Todos as descrições das pessoas são sobre a humanidade do atendimento, a pessoa pega no pulso, examina, olha com carinho. Então eu acho que vai ter outra coisa, que os médicos cubanos trouxeram pro brasil, um alto grau de humanidade.<br><br>

 Ai você fala o seguinte: "- Mas vocês acabaram isso?" Vou te falar: -"Não, está em andamento!" Tem obras que "vai" durar pra depois de 2010. Agora, por isso, nós já não desenhamos, não começamos a fazer projeto do que nós "podêmo fazê"? 11, 12, 13, 14... Por que é que não?<br><br>

 Primeiro eu queria cumprimentar os internautas. -Oi Internautas! Depois dizer que o meio ambiente é sem dúvida nenhuma uma ameaça ao desenvolvimento sustentável. E isso significa que é uma ameaça pro futuro do nosso planeta e dos nossos países. O desemprego beira 20%, ou seja, 1 em cada 4 portugueses.<br><br>

 Todos as descrições das pessoas são sobre a humanidade do atendimento, a pessoa pega no pulso, examina, olha com carinho. Então eu acho que vai ter outra coisa, que os médicos cubanos trouxeram pro brasil, um alto grau de humanidade.<br><br>
 </p>
</center>
</div>


<div class="item_modal">
<center>
 <h1> ITEM 3 </h1> 
 <h1 class="modal_btn_fechar"> X </h1>
 
  <p>Ai você fala o seguinte: "- Mas vocês acabaram isso?" Vou te falar: -"Não, está em andamento!" Tem obras que "vai" durar pra depois de 2010. Agora, por isso, nós já não desenhamos, não começamos a fazer projeto do que nós "podêmo fazê"? 11, 12, 13, 14... Por que é que não?<br><br>

 Eu dou dinheiro pra minha filha. Eu dou dinheiro pra ela viajar, então é... é... Já vivi muito sem dinheiro, já vivi muito com dinheiro. -Jornalista: Coloca esse dinheiro na poupança que a senhora ganha R$10 mil por mês. -Dilma: O que que é R$10 mil?<br><br>

 A única área que eu acho, que vai exigir muita atenção nossa, e aí eu já aventei a hipótese de até criar um ministério. É na área de... Na área... Eu diria assim, como uma espécie de analogia com o que acontece na área agrícola.<br><br>

 A população ela precisa da Zona Franca de Manaus, porque na Zona franca de Manaus, não é uma zona de exportação, é uma zona para o Brasil. Portanto ela tem um objetivo, ela evita o desmatamento, que é altamente lucravito. Derrubar arvores da natureza é muito lucrativo!<br><br>

 No meu xinélo da humildade eu gostaria muito de ver o Neymar e o Ganso. Por que eu acho que.... 11 entre 10 brasileiros gostariam. Você veja, eu já vi, parei de ver. Voltei a ver, e acho que o Neymar e o Ganso têm essa capacidade de fazer a gente olhar.<br><br>
 </p>
</center>
</div>


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

How can I get each element open each menu item with its respective div ?

<li>ITEM 1</li> → Open a div <h1> ITEM 1 </h1>"
<li>ITEM 2</li> → Open a div <h1> ITEM 2 </h1>" ...

Note: Run the snippet in full page mode.

While you're at it, I'd recommend removing those `` tags as they are [deprecated](http://stackoverflow.com/questions/1798817/why-is-the-center-tag-deprecated-in-html) and the `
` overdose will hit your SEO rankings hard... — stephenmurdoch, Jul 30 '16 at 00:54
I made the code in a hurry. It was only to exemplify. Thank you for the warning :) — Zkk, Jul 30 '16 at 00:58

score 1 · Answer 1 · answered Jul 30 '16 at 00:21

If there are no other .menu lis or .item_modals and their order is always kept the same, then you could use .index() and .eq().

In the code below, the nth .menu li will open the nth .item_modal.

$(document).ready(function(){
  $('.menu li').click(function() {
    $('.item_modal').eq($('.menu li').index(this)).addClass('open');
    //              ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^--------------------- changed here
 });

 $('.modal_btn_fechar').click(function(){
   $('.item_modal').removeClass('open');
  });
});

html, body{
 width: 100%;
 height: 100%;
 padding: 0;
 margin: 0;
 background-color: red;
}

.menu{
 position: absolute;
}

.item_modal{
 position: fixed;
 width: 100%;
 height: 100%;
 background: black;
 color: white;
 transform: translateY(-100%);
 transition: transform 0.4s ease-in-out;
}

.open{
 z-index: 999;
 transform: translateY(0%);
 transition: transform 0.4s ease-in-out;
}

<div class="menu">
<ul>
 <li>ITEM 1</li>
 <li>ITEM 2</li>
 <li>ITEM 3</li> 
</ul>
</div>

<div class="item_modal">
<center>
  <h1> ITEM 1 </h1> <h1 class="modal_btn_fechar"> X </h1>

  <p>Todos as descrições das pessoas são sobre a humanidade do atendimento, a pessoa pega no pulso, examina, olha com carinho. Então eu acho que vai ter outra coisa, que os médicos cubanos trouxeram pro brasil, um alto grau de humanidade.<br><br>

 Eu dou dinheiro pra minha filha. Eu dou dinheiro pra ela viajar, então é... é... Já vivi muito sem dinheiro, já vivi muito com dinheiro. -Jornalista: Coloca esse dinheiro na poupança que a senhora ganha R$10 mil por mês. -Dilma: O que que é R$10 mil?<br><br>

 A população ela precisa da Zona Franca de Manaus, porque na Zona franca de Manaus, não é uma zona de exportação, é uma zona para o Brasil. Portanto ela tem um objetivo, ela evita o desmatamento, que é altamente lucravito. Derrubar arvores da natureza é muito lucrativo!<br><br>

    Ai você fala o seguinte: "- Mas vocês acabaram isso?" Vou te falar: -"Não, está em andamento!" Tem obras que "vai" durar pra depois de 2010. Agora, por isso, nós já não desenhamos, não começamos a fazer projeto do que nós "podêmo fazê"? 11, 12, 13, 14... Por que é que<br><br> não?

 No meu xinélo da humildade eu gostaria muito de ver o Neymar e o Ganso. Por que eu acho que.... 11 entre 10 brasileiros gostariam. Você veja, eu já vi, parei de ver. Voltei a ver, e acho que o Neymar e o Ganso têm essa capacidade de fazer a gente olhar.<br><br>

 A única área que eu acho, que vai exigir muita atenção nossa, e aí eu já aventei a hipótese de até criar um ministério. É na área de... Na área... Eu diria assim, como uma espécie de analogia com o que acontece na área agrícola.<br><br>

 Se hoje é o dia das crianças... Ontem eu disse: o dia da criança é o dia da mãe, dos pais, das professoras, mas também é o dia dos animais, sempre que você olha uma criança, há sempre uma figura oculta, que é um cachorro atrás. O que é algo muito importante!<br><br>
  </p>
</center>
</div>

<div class="item_modal">
<center>
 <h1> ITEM 2 </h1> 
 <h1 class="modal_btn_fechar"> X </h1>

 <p>No meu xinélo da humildade eu gostaria muito de ver o Neymar e o Ganso. Por que eu acho que.... 11 entre 10 brasileiros gostariam. Você veja, eu já vi, parei de ver. Voltei a ver, e acho que o Neymar e o Ganso têm essa capacidade de fazer a gente olhar.<br><br>

 Eu dou dinheiro pra minha filha. Eu dou dinheiro pra ela viajar, então é... é... Já vivi muito sem dinheiro, já vivi muito com dinheiro. -Jornalista: Coloca esse dinheiro na poupança que a senhora ganha R$10 mil por mês. -Dilma: O que que é R$10 mil?<br><br>

 Se hoje é o dia das crianças... Ontem eu disse: o dia da criança é o dia da mãe, dos pais, das professoras, mas também é o dia dos animais, sempre que você olha uma criança, há sempre uma figura oculta, que é um cachorro atrás. O que é algo muito importante!<br><br>

 Todos as descrições das pessoas são sobre a humanidade do atendimento, a pessoa pega no pulso, examina, olha com carinho. Então eu acho que vai ter outra coisa, que os médicos cubanos trouxeram pro brasil, um alto grau de humanidade.<br><br>

 Ai você fala o seguinte: "- Mas vocês acabaram isso?" Vou te falar: -"Não, está em andamento!" Tem obras que "vai" durar pra depois de 2010. Agora, por isso, nós já não desenhamos, não começamos a fazer projeto do que nós "podêmo fazê"? 11, 12, 13, 14... Por que é que não?<br><br>

 Primeiro eu queria cumprimentar os internautas. -Oi Internautas! Depois dizer que o meio ambiente é sem dúvida nenhuma uma ameaça ao desenvolvimento sustentável. E isso significa que é uma ameaça pro futuro do nosso planeta e dos nossos países. O desemprego beira 20%, ou seja, 1 em cada 4 portugueses.<br><br>

 Todos as descrições das pessoas são sobre a humanidade do atendimento, a pessoa pega no pulso, examina, olha com carinho. Então eu acho que vai ter outra coisa, que os médicos cubanos trouxeram pro brasil, um alto grau de humanidade.<br><br>
 </p>
</center>
</div>


<div class="item_modal">
<center>
 <h1> ITEM 3 </h1> 
 <h1 class="modal_btn_fechar"> X </h1>
 
  <p>Ai você fala o seguinte: "- Mas vocês acabaram isso?" Vou te falar: -"Não, está em andamento!" Tem obras que "vai" durar pra depois de 2010. Agora, por isso, nós já não desenhamos, não começamos a fazer projeto do que nós "podêmo fazê"? 11, 12, 13, 14... Por que é que não?<br><br>

 Eu dou dinheiro pra minha filha. Eu dou dinheiro pra ela viajar, então é... é... Já vivi muito sem dinheiro, já vivi muito com dinheiro. -Jornalista: Coloca esse dinheiro na poupança que a senhora ganha R$10 mil por mês. -Dilma: O que que é R$10 mil?<br><br>

 A única área que eu acho, que vai exigir muita atenção nossa, e aí eu já aventei a hipótese de até criar um ministério. É na área de... Na área... Eu diria assim, como uma espécie de analogia com o que acontece na área agrícola.<br><br>

 A população ela precisa da Zona Franca de Manaus, porque na Zona franca de Manaus, não é uma zona de exportação, é uma zona para o Brasil. Portanto ela tem um objetivo, ela evita o desmatamento, que é altamente lucravito. Derrubar arvores da natureza é muito lucrativo!<br><br>

 No meu xinélo da humildade eu gostaria muito de ver o Neymar e o Ganso. Por que eu acho que.... 11 entre 10 brasileiros gostariam. Você veja, eu já vi, parei de ver. Voltei a ver, e acho que o Neymar e o Ganso têm essa capacidade de fazer a gente olhar.<br><br>
 </p>
</center>
</div>


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

I will insert other elements in the menu, in this case, I believe that the only solution is to add class by class in each
I don't understand what you mean by "add class by class in each

score 0 · Answer 2 · edited Jul 30 '16 at 01:16

0

With the code:

$('.item').click(function() {
    $(this).addClass('active');
});

The clicked item is the one that will receive the added class. You should be able to use this to open the relevant class.

edited Jul 30 '16 at 01:16

Angel Politis

10,955
14
48
66

answered Jul 30 '16 at 00:20

Toby

12,743
8
43
75

Angel Politis · Accepted Answer · 2016-07-30T01:09:32.970

You can determine which li element was clicked and open the corresponding div by using:

The :nth-of-type selector &
The index() method.

Code:

$('.menu li').click(function() {
    var uid = $('.menu li').index(this) + 2;
    $('.item_modal:nth-of-type(' + uid + ')').addClass("open");
};

jsFiddle: → here.

Snippet:

$(document).ready(function() {
  $('.menu li').click(function() {
    var uid = $('.menu li').index(this) + 2;
    $('.item_modal:nth-of-type(' + uid + ')').addClass("open");
  });

  $('.modal_btn_fechar').click(function() {
    $('.item_modal').removeClass('open');
  });
});

html,
body {
  width: 100%;
  height: 100%;
  padding: 0;
  margin: 0;
  background-color: red;
}
.menu {
  position: absolute;
}
.item_modal {
  position: fixed;
  width: 100%;
  height: 100%;
  background: black;
  color: white;
  transform: translateY(-100%);
  transition: transform 0.4s ease-in-out;
}
.open {
  z-index: 999;
  transform: translateY(0%);
  transition: transform 0.4s ease-in-out;
}

<div class="menu">
  <ul>
    <li>ITEM 1</li>
    <li>ITEM 2</li>
    <li>ITEM 3</li>
  </ul>
</div>

<div class="item_modal">
  <center>
    <h1> ITEM 1 </h1> 
    <h1 class="modal_btn_fechar"> X </h1>
    <p>I am the text for Item 1.</p>
  </center>
</div>

<div class="item_modal">
  <center>
    <h1> ITEM 2 </h1>
    <h1 class="modal_btn_fechar"> X </h1>
    <p>I am the text for Item 2.</p>
  </center>
</div>


<div class="item_modal">
  <center>
    <h1> ITEM 3 </h1>
    <h1 class="modal_btn_fechar"> X </h1>
    <p>I am the text for Item 3.</p>
  </center>
</div>


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

I will insert other elements in the menu, in this case, I believe that the only solution is to add class by class in each
Insert as many elements as you want provided that the order is: **`1, 2, 3, 4, 5`** and not **`1, 2, 4, 3, 5`** etc and the code will work fine without you having to do anything else. Code repetition is almost always bad practice @Zkk :) — Angel Politis, Jul 30 '16 at 01:20
If for some odd reason you want the elements in a non-canonical order, you can set a **`class`** for each **`li`** and each **`div`** or use anchors to bind them. — Angel Politis, Jul 30 '16 at 01:26

How to show each item of ?

` overdose will hit your SEO rankings hard...

3 Answers3

How to show each item of
?