How to Create a Comment System in Which Only One Reply Comment Box Can Be Open At Once with jQuery

In this article, we show how to create a comment system in which only one reply comment box can be opened at once.

We will write the code with jQuery, the famous Javascript library that requires less code than if coding with Javascript.

Comment systems such as youtube uses this same approach so that a user can't open up many different reply comment boxes, if replying to user comments. Only one comment box can be open at once.

So to see a demonstration of this, check out the form below.

Comment 1: This is comment 1

Comment 2: This is comment 2

Comment 3: This is comment 3

Comment 4: This is comment 4

Comment 5: This is comment 5

You can see that only one reply button can be open at once.

Youtube implements this same system.

So now that you've seen the demonstration, let's go over how to write the code.

So first we'll be showing the HTML code and then the jQuery code.

HTML Code

The HTML code to create what's above is shown in the code below.

<p>Comment 1: This is comment 1</p> <button class="replybutton" data-commentbox="panel1">Reply</button><br/><br/> <div class="replybox" id="panel1" style="display:none"> <textarea cols="35" rows="8"></textarea><br/> <button class="cancelbutton">Cancel</button><br/><br/> </div> <br/><br/> <hr> <p>Comment 2: This is comment 2</p> <button class="replybutton" data-commentbox="panel2">Reply</button><br/><br/> <div class="replybox" style="display:none" id="panel2"> <textarea cols="35" rows="8"></textarea><br/> <button class="cancelbutton">Cancel</button><br/><br/> </div> <br/><br/> <hr> <p>Comment 3: This is comment 3</p> <button class="replybutton" data-commentbox="panel3">Reply</button><br/><br/> <div class="replybox" style="display:none" id="panel3"> <textarea cols="35" rows="8"></textarea><br/> <button class="cancelbutton">Cancel</button><br/><br/> </div> <br/><br/> <hr> <p>Comment 4: This is comment 4</p> <button class="replybutton" data-commentbox="panel4">Reply</button><br/><br/> <div class="replybox" style="display:none" id="panel4"> <textarea cols="35" rows="8"></textarea><br/> <button class="cancelbutton">Cancel</button><br/><br/> </div> <br/><br/> <hr> <p>Comment 5: This is comment 5</p> <button class="replybutton" data-commentbox="panel5">Reply</button><br/><br/> <div class="replybox" style="display:none" id="panel5"> <textarea cols="35" rows="8"></textarea><br/> <button class="cancelbutton">Cancel</button><br/><br/> </div> <br/><br/>

HTML Code

The first thing we'll do is go over the HTML code.

This is comprised of a comment followed by a button.

Underneath this, when clicked, is a div tag. We'll get more to this later.

So let's first go first to the button. This button, as well as all of the buttons, has a class of "replybutton". We also add an attribute, data-commentbox="panel1". If you know HTML, then you know that you can add an attribute by adding data- followed by the attribute name. HTML and Javascript will view this as an attribute, since it begins with, data-. We will add a div tag that has an id equal to this attribute, so that both are matched up. Therefore, we will write jQuery code, so that when we click the button, the corresponding div tag (the comment box) will open up underneath it.

Next, we go to the div tag. By default, this div tag, which contains a textarea and a cancel button, does not show. We make it not show by default using the statement, style="display:none"

This div tag has a class equal to, "replybox". The first div tag has an id equal to, "panel1". The class for all the div tags will be the same. The id for each div tag will be unique.

With this div tag, we have a textarea.

Underneath we have a cancel button that has a class equal to, "cancelbutton"

We then close the div tag.

We do the same for each pursuing comment.

Each div tag has the same class but a different id. The cancel buttons are have the same exact code (same class).

This concludes the HTML code.

jQuery Code

Next, we have the jQuery code.

This gives the functionality to our comment system.

This is shown below.

<script> $(function() { $('.replybutton').on('click', function() { $('.replybox').hide(); var commentboxId= $(this).attr('data-commentbox'); $('#'+commentboxId).toggle(); }); $('.cancelbutton').on('click', function() { $('.replybox').hide(); }); }); </script>

So we have the statement, at the top, $(function() {, so that our code only runs when the page is fully loaded.

We grab all elements with a class of "replybutton" with the statement, $('.replybutton')

When this button is clicked, we hide all comment boxes. p id="para1">We then create a variable, commentboxId, and set this equal to, $(this).attr('data-commentbox');

This gets the value of the attribute, data-commentbox

To toggle the id that has a value equal to the variable, commentboxId, we have the statement, $('#'+commentboxId).toggle();

Remember that each div tag has an id equal to the value of the data-commentbox attribute.

To give the cancel button functionality, we grab the class of "cancelbutton'. When a user clicks a cancel button, all the comment boxes will be hid.

So this is how we can create a comment system in which only one reply comment box can be open at once with jQuery.

Related Resources

HTML Comment Box is loading comments...

Learning about Electronics

How to Create a Comment System in Which Only One Reply Comment Box Can Be Open At Once with jQuery

HTML Code

HTML Code

jQuery Code