Using JQuery, you can toggle a newly created DIV element by linking it to `$(this)` instead of `$(this).closest()`

Question

Using JQuery, you can toggle a newly created DIV element by linking it to `$(this)` instead of `$(this).closest()`

In the comment section, there is a link called "Reply" that triggers a pop-up comment box when clicked. However, I want the comment box to disappear if the "reply" button is clicked again, as it currently keeps opening more comment boxes.

$('.replylink').click(function(event){ // Create comment box after clicking reply
event.stopPropagation();
var commentBox = $('<div class="comment-box"></div>');
$(this).closest('div').after(commentBox);
});

I have tried using toggle() in various ways. For instance,

$($(this).closest('div').after(commentBox)).toggle();

But this will only toggle the "reply" link, causing it to disappear while the comment box appears. I am unsure of how to toggle just the comment box. Is there anyone who can assist me with this issue? Thank you!

javascript jquery toggle

Answer 1

Answer №1

If there is no existing .comment-box, the code below will create one and if it does exist, it will be deleted for individual threads.

I have enhanced your .closest() function by adding a class. This makes it more specific, as searching just for a div is too broad. By adding a class, you can add multiple divs and wrappers between your reply link and the wrapper. It may not be necessary at present, but it adds future-proofing to your code.

The commented code below is designed to work for both single comment areas and multiple threads or comment sections on a single page.

I made a minor change by appending the comment box to .before() the reply link instead of using .after(). This change enhances the user interface from a stylistic perspective.

Demo

// Create comment box after clicking reply
$('.replylink').click(function(event) {

  // Prevent default action for click (i.e., going to top of page)
  event.preventDefault();

  // Set wrapping thread div
  // this allows for multiple threads on the same page if needed
  thread = $(this).closest("div.thread");

  // Check if thread has an opened comment box
  if (thread.find(".comment-box").length > 0) {

    // Delete any comment boxes within this comment thread
    thread.find(".comment-box").remove();


  } else {

    // Uncomment the line below if you want to close all other comment boxes
    // $(".comment-box").remove();

    // Create a coment box if it doesn't exist
    var commentBox = $('<div class="comment-box"></div>');
    $(this).before(commentBox);

  }

});

.comment-box {
  height: 20px;
  padding: 10px;
  border: 1px solid blue;
  margin-bottom: 10px;
}

.thread {
  border: 1px black solid;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="thread">
  <h3>Thread One</h3>
  <a href="#" class="replylink">Reply</a>
</div>

<div class="thread">
  <h3>Thread Two</h3>
  <a href="#" class="replylink">Reply</a>
</div>

<div class="thread">
  <h3>Thread Three</h3>
  <a href="#" class="replylink">Reply</a>
</div>

Answer 2

If there is no existing .comment-box, the code below will create one and if it does exist, it will be deleted for individual threads.

I have enhanced your .closest() function by adding a class. This makes it more specific, as searching just for a div is too broad. By adding a class, you can add multiple divs and wrappers between your reply link and the wrapper. It may not be necessary at present, but it adds future-proofing to your code.

The commented code below is designed to work for both single comment areas and multiple threads or comment sections on a single page.

I made a minor change by appending the comment box to .before() the reply link instead of using .after(). This change enhances the user interface from a stylistic perspective.

Demo

// Create comment box after clicking reply
$('.replylink').click(function(event) {

  // Prevent default action for click (i.e., going to top of page)
  event.preventDefault();

  // Set wrapping thread div
  // this allows for multiple threads on the same page if needed
  thread = $(this).closest("div.thread");

  // Check if thread has an opened comment box
  if (thread.find(".comment-box").length > 0) {

    // Delete any comment boxes within this comment thread
    thread.find(".comment-box").remove();


  } else {

    // Uncomment the line below if you want to close all other comment boxes
    // $(".comment-box").remove();

    // Create a coment box if it doesn't exist
    var commentBox = $('<div class="comment-box"></div>');
    $(this).before(commentBox);

  }

});

.comment-box {
  height: 20px;
  padding: 10px;
  border: 1px solid blue;
  margin-bottom: 10px;
}

.thread {
  border: 1px black solid;
  padding: 10px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div class="thread">
  <h3>Thread One</h3>
  <a href="#" class="replylink">Reply</a>
</div>

<div class="thread">
  <h3>Thread Two</h3>
  <a href="#" class="replylink">Reply</a>
</div>

<div class="thread">
  <h3>Thread Three</h3>
  <a href="#" class="replylink">Reply</a>
</div>

Using JQuery, you can toggle a newly created DIV element by linking it to `$(this)` instead of `$(this).closest()`

Answer №1

Demo

Similar questions

Could it be that express-session is not compatible with express 4.13?

Is it feasible to generate a fixed lighting effect overlay with HTML and CSS?

Trigger modal following unsuccessful registration

JavaScript code for sending information to the server

PHP mistakenly outputs content that is not enclosed within tags

The Aurelia application encounters a "Maximum call stack size exceeded" error while trying to bind FullCalendar

Retrieve the route.js directory using Node.js

Is there a way to seamlessly inject a stylesheet into a React application without causing any flickering or reloading on the website?

A single Modal, Ajax, and data that is continuously refreshed

Steps to transfer the content of a label when the onclick event occurs

How can I configure my React Project to direct users to example.com/login.html when they land on the root URL?

Combining Option Value and Name Selection Using React Hooks

Navigating the Angular Controller life cycle

Using regular expressions to replace strings in JavaScript

Inserting a Specific Iframe into a Designated Location in HTML with the Help of Jquery

Placing a new item following the child of a different element

Route Handler 13 is encountering difficulties in retrieving data from the body in the (app/api/auth) endpoint

Discovering the method for retrieving JavaScript output in Selenium

Passing references in React to parent components

Tips on showing binary information as images using extjs 4