Show/hide div from separate links _ multiple boxes issue

Question

I have managed to toggle a div with different links. But when i'm trying to make more boxes which the same it doesn't work anymore.

Imagine I have like 10 entries - all separated divs 'entry'

  <div class="entry" id="1">

where i want to separately hide and show content with multiple links.

My Question is, I'm trying to fix this since 5 hours, but which one div entry its working, with more than one it is not working.

I tried to use

$(".entry").each(function() {

Here is my code:

 $(document).ready(function() { $(".entry").each(function() { var b4c = $('.lower_menu').html(); // content of box 4 so that we cn refer to it later $(".menu1,.menu2,.menu3").click(function() { var active_content = $(".lower_menu").data('content'); var cls = $(this).attr('class'); if (active_content == '') { $(".lower_menu").html($("." + cls + '_CONTENT').html()) $(".lower_menu").data('content', cls); } else { if (active_content == cls) { $('.lower_menu').html(b4c).data('content', ''); } else { $(".lower_menu").html($("." + cls + '_CONTENT').html()) $(".lower_menu").data('content', cls); } } }); }); }); 

 .menu1 {height:40px; background-color:red;} .menu2 {height:40px; background-color:green;} .menu3 {height:40px; background-color:blue;} .menu1_CONTENT {display:none; background-color:red;} .menu2_CONTENT {display:none; background-color:green;} .menu3_CONTENT {display:none; background-color:blue;} 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="entry"> <div class="menu1"> <span id="arrow_prod" class="glyphicon glyphicon-chevron-down arrow"></span> Heading 1 </div> <div class="menu2">BOX 2</div> <div class="menu3">BOX 3</div> <!-- data-content is to check do we have content or which boxes's content do we hv now --> <div class="lower_menu" data-content=""></div> <div class="menu1_CONTENT">CONTENT FOR BOX 1</div> <div class="menu2_CONTENT">CONTENT FOR BOX 2</div> <div class="menu3_CONTENT">CONTENT FOR BOX 3</div> </div> <div class="entry"> <div class="menu1">BOX 1</div> <div class="menu2">BOX 2</div> <div class="menu3">BOX 3</div> <!-- data-content is to check do we have content or which boxes's content do we hv now --> <div class="lower_menu" data-content=""></div> <div class="menu1_CONTENT">CONTENT FOR BOX 1</div> <div class="menu2_CONTENT">CONTENT FOR BOX 2</div> <div class="menu3_CONTENT">CONTENT FOR BOX 3</div> </div> 

... and a JSFiddle

Answer 1

it's a official bug of the jquery! We found one guys ! YEEEHAA