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.


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


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.

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

Javascript- Functions Tutorial

Javascript- Onload Event Handler

Javascript- Onunload Event Handler

Javascript- Onfocus Event Handler

Javascript- Onblur Event Handler

Javascript- Onclick Event Handler

Javascript- Onchange Event Handler

Javascript- Onkeydown Event Handler

Javascript- Onkeyup Event Handler

Javascript- Onkeypress Event Handler

Javascript- Onmouseover Event Handler

Javascript- Onmousedown Event Handler

Javascript- Onmouseup Event Handler

Javascript- Onmouseout Event Handler

Javascript- Onreset Event Handler

Javascript- Onabort Event Handler

Javascript- Oncopy Event Handler

HTML Comment Box is loading comments...