How do I toggle forms based on the click of two buttons using jQuery


44
views
1
6 weeks ago by
I need to show forms when I click on buttons edit and reply. It's a comment system. And this system is composed of nested comments (comments and replies, primary unordered list and secondary unordered list, respectively). But my jQuery scripts are not working the way I want them to. I want them to show and hide, hide and show one at a time. When I click on one, it shows. And when I click on another, the one that shew disappears and the one (button) I clicked makes form show on time. And so on and so forth, regardless of position, no matter if this button is in the primary or secondary unordered lists ("ul"). The same goes for the forms. But this is not happening. What happens is that when I click on any button at any position, the forms disappear, altogether, and when I click on it again, it (the form) simply does not show any more. This is my code:

 <html>
<head>
<title>Test it!</title>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<div>
<ul class="list-of-comments">
<div class="allcomments">
    <li class="noofcomments">
        <div class="comment-wrap">
            <div class="commentator-pic"></div>
            <div class="comment">Comments show here</div>
            <!--This is the position of the edit form-->
            <div class="edit-form">
                <form enctype="multipart/form-data" method="post" action="">
                    <textarea class="subcomment" name="subcomment" cols="50" rows="4">Edit comment</textarea>
                    <input type="submit" name="edit" value="Submit">
                </form>
            </div>
            <br>
            <!--These are the main comment buttons or controllers-->
            <button class="edit-comment">Edit</button>
            <button class="reply">Reply</button>
            <button>Delete</button>
            <!--This is the position of the reply form-->
            <div class="reply-to-comment">
                <form enctype="multipart/form-data" method="post" action="">
                    <textarea class="subcomment" name="subcomment" cols="50" rows="4">Submit comment</textarea>
                    <input type="submit" name="reply" value="Submit">
                </form>
            </div>
        </div>
        <!--Here we have the replies to the comment above-->
        <ul class="replies">
            <li class="clicktoviewreplies">Show/hide replies</li>
            <div class="replies-wrap">
                <div class="commentator-pic"></div>
                <div class="replies-to-comment">Replies show here</div>
                <!--This is the position of the edit form-->
                <div class="edit-form">
                    <form enctype="multipart/form-data" method="post" action="">
                        <textarea class="subcomment" name="subcomment" cols="50" rows="4">Edit reply</textarea>
                        <input type="submit" name="edit" value="Submit">
                    </form>
                </div>
                <br>
                <!--These are the main comment buttons or controllers-->
                <button class="edit-comment">Edit</button>
                <button class="reply">Reply</button>
                <button>Delete</button>
                <!--This is the position of the reply form-->
                <div class="reply-to-comment">
                    <form enctype="multipart/form-data" method="post" action="">
                        <textarea class="subcomment" name="subcomment" cols="50" rows="4">Submit reply</textarea>
                        <input type="submit" name="reply" value="Submit">
                    </form>
                </div>
            </div>
        </ul>
    </li>
</div>
</ul>
</div>
<!--This is the FIRST SCRIPT-->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.3.1.min.js"></script> 
<script>
    $(document).ready(function(){
      //$(document).on('click' , '.reply' , function(){
      $('.reply').click(function(){
         var closestDiv = $(this).closest('div'); // also you can use $(this).parent()
         $('.reply-to-comment').not(closestDiv.next('.reply-to-comment')).css("display", "none");
         closestDiv.next('.reply-to-comment').slideToggle(100);
      });
    });
</script>

<!--This is the SECOND SCRIPT-->
<script>
    $(document).ready(function(){
      //$(document).on('click' , '.edit-comment' , function(){
      $('.edit-comment').click(function(){ 
         var closestDivtwo = $(this).closest('div'); // also you can use $(this).parent()
         $('.edit-form').not(closestDivtwo.prev('.edit-form')).css('display', 'none');
         closestDivtwo.prev('.edit-form').slideToggle(100);
         //$(this).prev('.edit-form').slideToggle(100);
      });
    });
</script>

</body>
</html>​

Well, take a look at my first and second scripts and draw your own conclusions. What can be happening? One more detail: There are four buttons (edit and reply comment, and edit and reply to reply) and four forms (edit and reply forms and edit reply and reply to reply forms), and four classes.

This is the css:

.reply-to-comment{
	display:block; /* display: none */
	}
	
.edit-form{
	display:block; /* display: none */
	}​
Community: Code Character

1 Answer


2
6 weeks ago by
Try to use the find() method, instead of prev() or next(). Like this:

<script>
    $(document).ready(function(){
      //$(document).on('click' , '.edit-comment' , function(){
      $('.edit-comment').click(function(){ 
         var closestDivtwo = $(this).closest('div'); // also you can use $(this).parent()
         $('.edit-form').not(closestDivtwo.find('.edit-form')).css('display', 'none');
         closestDivtwo.find('.edit-form').slideToggle(100);
      });
    });
</script>​


See if that will solve the problem.
Yeah, it's worked out. Thanks, man! You're the best.
written 6 weeks ago by Rogerio Soares  
Please login to add an answer/comment or follow this question.

Similar posts:
Search »
  • Nothing matches yet.