CODEWITHSUNDEEP
javascripthtmljquery
Shyam Kumar
Shyam Kumar

Reputation: 3

Javascript onclick for multiple elements in jquery

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?

Upvotes: 0

Views: 161

Answers (1)

mplungjan
mplungjan

Reputation: 178412

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

  1. 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>

  1. 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>

Upvotes: 3

Related Questions