Javascript onclick for multiple elements in jquery

Question

I have below javascript code.

function hide(id) {
    prp = document.getElementById(id).style.display;
    if(prp == "block")
        prp = "none";
    else 
        prp = "block";
    document.getElementById(id).style.display = prp;
}

<body>
<button id="btn1" onclick="hide('p1')">Button1</button>
<button id="btn2" onclick="hide('p2')">Button2</button>
<button id="btn3" onclick="hide('p3')">Button3</button>

<p id="p1" style="display: block;">This is para 1</p>
<p id="p2" style="display: block;">This is para 2</p>
<p id="p3" style="display: block;">This is para 3</p>
</body>

Suppose, I have N numbers of button/p tags like above. How to convert this code to jQuery?

mplungjan · Accepted Answer · 2020-06-25 08:16:40Z

You need to delegate - I wrapped in a container

Note I added data attributes to the buttons to get at the paragraph from the button instead of inline event handlers

vanilla JS

document.getElementById("container").addEventListener("click",function(e) {
  const tgt = e.target;
  if (tgt.classList.contains("toggleBtn")) {
    e.preventDefault(); // stop the click in case it is in a form
    document.getElementById(tgt.dataset.id).classList.toggle("hide")
  }
})

.hide {
  display: none
}

<div id="container">
  <button id="btn1" class="toggleBtn" data-id="p1">Button1</button>
  <button id="btn2" class="toggleBtn" data-id="p2">Button2</button>
  <button id="btn3" class="toggleBtn" data-id="p3">Button3</button>
</div>
<p id="p1">This is para 1</p>
<p id="p2">This is para 2</p>
<p id="p3">This is para 3</p>

jQuery

$("#container").on("click", ".toggleBtn", function(e) {
  e.preventDefault();
  $("#"+this.dataset.id).toggleClass("hide"); // or just .toggle()
})

.hide {
  display: none
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="container">
  <button id="btn1" class="toggleBtn" data-id="p1">Button1</button>
  <button id="btn2" class="toggleBtn" data-id="p2">Button2</button>
  <button id="btn3" class="toggleBtn" data-id="p3">Button3</button>
</div>
<p id="p1">This is para 1</p>
<p id="p2">This is para 2</p>
<p id="p3">This is para 3</p>

Collectives™ on Stack Overflow

Javascript onclick for multiple elements in jquery

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related