How to hide form by default and show on click

Question

I have a comment form which is showed by a php while loop like

Post 1
Comment box 1

Post 2
Comment box 2

i want to hide the comment box by default and when the user click on comment link then the form should be shown

here is what I've tried

$(document).ready(function() {

    $("#showActionComment").hide();
    $("#showActionComment").click(function() {
        $("#comForm").show();
    });
});

Html

php while loop starts here
Post 1
<a href="javascript:void(0);" id="comForm">Comment</a>
<form action="/comment.php" class="form-horizontal" id="showActionComment">
<input type="text" name="comment">
</form>

php while loop ends here

Due to loop there may be 15 post above code doesn't work in my case

Answer 1

You are creating elements in a loop with same id. Identifiers in HTML must be unique otherwise it invalid HTML. You can use class selector and there relationship to traverse between elements

CSS .showActionComment{ display:none;}

PHP Script to generate HTML

php while loop starts here

    <a href="javascript:void(0);" class="comForm">Comment</a>
    <form action="/comment.php" class="form-horizontal showActionComment">
        <input type="text" name="comment">
    </form>

php while loop ends here

jQuery Script , You need to subscribe click event on comForm element not form . Here in the code snippet I have used .next()

Get the immediately following sibling of each element in the set of matched elements.

$(document).on('click',".comForm", function(event) {
    event.preventDefault();
    $(this).next(".showActionComment").show();
});

Note: use Event Delegation using .on() delegated-events approach, when generating elements dynamically.

General Syntax

$(document).on('event','selector',callback_function)

Answer 2

Set the display:none property for the class.

.form-horizontal{
     display:none
}

Whenever you refresh the page, it will not display the form.
On click event, it will change display:none to display:block as per your click event.

Answer 3

Hide the form by default via css

#comForm {
display:none;
}

and then once the button is clicked show it

 $("#showActionComment").click(function() {
        $("#comForm").show();
    });

Answer 4

Perhaps you meant this - note IDs must be unique:

 $(function() { $(".showForm").on("click",function(e) { e.preventDefault(); $(this).next(".showActionComment").toggle(); }); }); 

 .showActionComment { display:none } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <a href="enableJavaScript.html" class="showForm">Comment</a> <form action="/comment.php" class="form-horizontal showActionComment"> <input type="text" name="comment"> </form><br/> <a href="enableJavaScript.html" class="showForm">Comment</a> <form action="/comment.php" class="form-horizontal showActionComment"> <input type="text" name="comment"> </form> 

If you load the comments and links using AJAX, change

  $(".showForm").on("click",function(e) {

to

  $(document).on("click",".showForm",function(e) {