How to Display and Hide reply form only when a reply button is clicked-CodePudding

I am trying to add reply comments to my comment system in a Laravel 8 project. I have written a script to show the reply form when the reply button is clicked but the form is always in displayed by default. However, when the reply button is clicked, the form hides and shows on the second click. I seem not to get what I am not getting right. Please, I need your assistant in this regard. This is my code:

//The form    
<div >
     @if ($PostDetails->comment)
         @foreach($PostDetails->comment as $comment)
             <blockquote >
             <p >{{ $comment->comment }}</p>
             <footer >{{ $comment->user->name }}</footer>
             </blockquote>
             {{-- Reply Comment Section --}}
             <button id="reply-button" onclick="showReplyForm('{{$comment->id}}', '{{ $comment->user->name }}')" >Reply</button>
             <div >
                  <form action="" method="post">
                       <div >
                            <textarea id="reply-form-{{$comment->id}}" cols="80" rows="2"  name="replyMessage"></textarea>
                       </div>
                  </form>
              </div>
              <hr>
         @endforeach
       @endif
</div>

//The script is:
<script type="text/javascript">
    function showReplyForm(commentId){
        var x = document.getElementById(`reply-form-${commentId}`);
        if (x.style.display === "none") {
            x.style.display = "block";
        }else{
            x.style.display = "none";
        }
    }
</script>

CodePudding user response：

Change the id attribute for your buttons to and add the style="display:none" to your textareas. Then you can simplify your JavaScript part to

document.querySelectorAll(".reply-button").forEach(btn=>btn.onclick=ev=>{      
  const x=ev.target.nextElementSibling.querySelector("textarea");
  x.style.display = x.style.display ==="none"?"":"none";
});

Then there is no need to assign ids to the individual textareas anymore.

CodePudding user response：

Add the style="display:none;" to make it hidden at start.

<div >
     @if ($PostDetails->comment)
         @foreach($PostDetails->comment as $comment)
             <blockquote >
             <p >{{ $comment->comment }}</p>
             <footer >{{ $comment->user->name }}</footer>
             </blockquote>
             {{-- Reply Comment Section --}}
             <button id="reply-button" onclick="showReplyForm('{{$comment->id}}', '{{ $comment->user->name }}')" >Reply</button>
             
             <div  style="display:none">
                  <form action="" method="post">
                       <div >
                            <textarea id="reply-form-{{$comment->id}}" cols="80" rows="2"  name="replyMessage"></textarea>
                       </div>
                  </form>
              </div>
              <hr>
         @endforeach
       @endif
</div>

//The script is:
<script type="text/javascript">
    function showReplyForm(commentId){
        var x = document.getElementById(`reply-form-${commentId}`);

        if (x.style.display === "none") {
            x.style.display = "block";
        }else{
            x.style.display = "none";
        }
        
    }
</script>