Quantcast
Channel: Active questions tagged html - Stack Overflow
Viewing all articles
Browse latest Browse all 74353

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

$
0
0

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>

Viewing all articles
Browse latest Browse all 74353


<script src="https://jsc.adskeeper.com/r/s/rssing.com.1596347.js" async> </script>