CODEWITHSUNDEEP
javascriptjquery
Anurag Ranjan
Anurag Ranjan

Reputation: 63

I want to hide and show a div on every click

I want to hide and show a div on every click but It just show and hide once but it never show again on button click

$(document).ready(function() {

  $(".disp-comment").hide();

  $(".comnt-area-view").click(function() {
    alert("hello");
    $(this).next(".disp-comment").show()

  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<a class="btn-read-more comnt-area-view ">Add Comment</a>
<div class="user-name disp-comment">
  <input type="text" class="form-control cmnt-namefld" placeholder="Enter your name">
  <textarea class="cmnt-txtarea" rows="4" cols="40" name="comment" form="usrform"></textarea>
  <input type="button" class="cmnt-btn" value="comment"></div>

<a class="btn-read-more comnt-area-view ">Add Comment</a>
<div class="user-name disp-comment">
  <input type="text" class="form-control cmnt-namefld" placeholder="Enter your name">
  <textarea class="cmnt-txtarea" rows="4" cols="40" name="comment" form="usrform"></textarea>
  <input type="button" class="cmnt-btn" value="comment">
</div>

Upvotes: 1

Views: 154

Answers (2)

Amit
Amit

Reputation: 1491

I have done little modification in your code. Let me know if this is helpful. Thanks. Here is the plunker https://plnkr.co/edit/KFh5EoROlsFs70U45jD4?p=preview 

$(document).ready(function() {

  $(".disp-comment").hide();
  console.log($(".disp-comment"))

  $(".comnt-area-view").click(function() {
    if ($(this).next()[0].style.display == 'none')
      $(this).next().show()
    else
      $(this).next().hide()

  });
});

Upvotes: 3

jvk
jvk

Reputation: 2201

$(function(){
             $(".disp-comment").hide();
                $(".comnt-area-view").click(function() {
                alert("hello");
                $(this).next(".disp-comment").toggle('hide, show');
            });
        })
        
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="comments">
        <a class="btn-read-more comnt-area-view ">Add Comment</a>
        <div class="user-name disp-comment">
            <input type="text" class="form-control cmnt-namefld" placeholder="Enter your name">
            <textarea class="cmnt-txtarea" rows="4" cols="40" name="comment" form="usrform"></textarea>
            <input type="button" class="cmnt-btn" value="comment"></div>
        <div>
            <div class="comments">
                <a class="btn-read-more comnt-area-view ">Add Comment</a>
                <div class="user-name disp-comment">
                    <input type="text" class="form-control cmnt-namefld" placeholder="Enter your name">
                    <textarea class="cmnt-txtarea" rows="4" cols="40" name="comment" form="usrform"></textarea>
                    <input type="button" class="cmnt-btn" value="comment">
            </div>
      </div>

Upvotes: 0

Related Questions