javascriptbuttonblogsreply

Open Comment Reply Form On Button Click

I have a blog that has a reply form for each comment on the blog. I am trying to create a "Reply" button that would show the form once its clicked. Right now, if I click any "Reply" button it will only apply the hide style to the first button and the block style to the first div.

HTML

<div class="reply">
  <button id="replybutton" onclick="replybutton()">Click Me</button>
  <div id="replyform">
    <form>
      ...
    </form>
  </div>
</div>

HTML

function replybutton() {
  document.getElementById("replyform").style.display = "block";
  document.getElementById("replybutton").style.display = "none";
enter code here
Solution

  • The id are supposed to be unique. So each form should have a unique id. You can use a common class to show/hide them.

    When you click a button you should pass its reference to your onClick function like this onclick="replybutton(this) and modify your onClick function to target the button function replybutton(btn). If you want to show/hide your form you can use the nextElementSibling

    See the jsFiddle

    https://jsfiddle.net/th4dz1q0/2/