Show and hide id with JavaScript for multiple items with the same name

Question

The problem is that it only hides / shows the first element. I want the button to work on all elements.

Here is the public interface on the developer page: https://dev.itf.njszt.hu/szoftver-termekek

$(document).ready(function(){
  $("#flip36090").click(function(){
    $("#panel36090").toggle("slow");
  });
});

.show {
    display: block !important;
}
.show-hide{
    display: block;
    border: 1px solid;
    background: aliceblue;
    padding-left: 2px;
    font-size: small;
    width: 100px;
    cursor: pointer;
    color:#000;
}
button {
  background: #0084ff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 15px;
  color: #fff;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>
  <span id="mutat">
    Futó Iván<span class="show"></span> </span>
  <span id="mutat">
    Szeredi János<span class="show"></span> </span>
  <span id="mutat">
    Pásztor Zoltán<span class="show"></span> </span>
  <span id="panel36090" style="display: none;">
    Keresztély Mária<span class="show"></span> </span>
  <span id="panel36090" style="display: none;">
    Boda Elena<span class="show"></span> </span>
  <span id="panel36090" style="display: none;">
    Kacsuk Péter<span class="show"></span> </span>
  <span id="panel36090" style="display: none;">
    Ferenczi Szabolcs<span class="show"></span> </span>
  <span id="flip36090" class="show-hide button">Show/Hide</span>
</div>

IDs are meant to be unique, so, your script finds the first and show/hide only that, you need to try another way. — Triby, Jan 24 '20 at 21:56
Try using class instead of id. As id is to be unique for every element. — Kundan, Jan 24 '20 at 22:00
Is this HTML which you control? In other words, are you looking for the right solution for solving the overall problem (i.e. including changing the HTML), or are you looking for a solution which allows the HTML to stay the same (i.e. invalid HTML, due to multiple elements with the same `id`), but which has jQuery code which does what you want? — Makyen, Jan 24 '20 at 22:02
@HereticMonkey While this may be a duplicate, the duplicate target which you suggested doesn't cover this issue. In that question, the issue was that the HTML was malformed. The HTML in that question didn't have multiple elements with the same `id`. — Makyen, Jan 24 '20 at 22:08

score 0 · Answer 1 · answered Jan 24 '20 at 21:53

In general you should not use the same id for multiple HTML elements. The purpose of the id attribute is to uniquely identify one element.

If you want to reference all of those elements as one collection, you should use class instead, for instance class="panel36090" Then you'll be able to hide/show all the elements of that class in your jQuery by replacing the hashtag with a period.

$(".panel36090").toggle("slow");

score 0 · Accepted Answer · answered Jan 24 '20 at 21:57

0

You shouldn't have duplicate id's on HTML page. Do it using classes instead. Add this class to your HTML span

$(document).ready(function(){
  $("#flip36090").click(function(){
    $(".panel36090").toggle("slow");
  });
});

answered Jan 24 '20 at 21:57

Ajit Hingmire

195
9

Show and hide id with JavaScript for multiple items with the same name

2 Answers2