In summary, make the following change:
jQuery(this).find(".box").toggle();
To ONE of these options:
$(this).parent('.comment').find(".box").toggle();
$(this).closest('.comment').find(".box").toggle();
$(this).siblings(".box").toggle();
Detailed Explanation:
The issue causing it to not work is related to how you are calling the function. Let's analyze your code and understand its behavior.
Initially, you have a basic jQuery selector. This instructs jQuery to search for a div with the class name button. It's important to note that jQuery utilizes CSS selectors for this purpose.
$( ".button" )
Next, you are defining an event. Here, the event is click, indicating that every time a div with the class button is clicked, something should happen. Notably, omitting a callback function can also trigger this event.
$( ".button" ).click(function() {
The subsequent line is where the problem occurs.
jQuery(this).find(".box").toggle();
An error arises from using jQuery. after already utilizing the shorthand $. The extended form is only necessary if conflicting libraries require distinguishing between them. Therefore, if $('.button') works as expected and represents a jQuery object, there is no need for jQuery.. More information on this topic can be found here.
Considering jQuery(this) as $(this), the usage of $(this) in an event's callback method refers to the element connected to that event. In your scenario, $(this) inside your function targets $('.button'). However, the issue lies in attempting to locate an inner element with the class box. As per your HTML structure, this action cannot succeed because .box is a sibling rather than embedded within .button. Consequently, a different approach is necessary before finding .box.
Various solutions exist here, each serving a distinct purpose with varying efficiency. I opted for a straightforward solution offering control over the parent element encompassing all relevant components. Mention will be made of potential alternatives shortly.
$(this).closest('.comment')
This instruction directs the .button:clicked component to identify the initial parent element containing the class .comment. Consequently, child or sibling elements are disregarded, focusing solely on relations above the current item. This enables access to the block housing all pertinent items for appropriate actions. Hence, future operations might involve using this as a variable within the function, such as:
$('.button').click(function(e) {
var container = $(this).closest('.comment');
This enables locating any content within said block. For toggling the .box, execute:
$(this).closest('.comment').find(".box").toggle();
// Alternatively, using the demonstrated variable
container.find(".box").toggle();
Various alternatives are contingent on your HTML layout. The provided example accommodates intricate hierarchies within .comment, whereas considering your specific HTML illustrates .button and .box as siblings. Consequently, utilizing a different call yields identical outcomes. For instance:
$(this).siblings(".box").toggle();
This approach permits the presently selected button element to target ANY sibling possessing the class box. It provides a simple solution when the HTML structure is uncomplicated.
However, many scenarios involving comment setups feature more complex and dynamic HTML compositions. Content is frequently loaded post-page initialization, rendering standard .click assignments ineffective. Given your specific HTML without a static Parent ID, a suitable modification would involve:
$(document).on('click', '.button', function(e) {
$(this).siblings('.box').toggle();
});
This directive permits attaching the click event to ANY element containing the class
.button</code, regardless of loading time. Nevertheless, assigning numerous events to the <code>document
may complicate matters and potentially slow down the browser, leading to further complications. Thus, my recommendation involves establishing a
static (loaded with the page's main HTML) region and applying dynamic assignments therein. For example:
<div id"Comments"><!-- load comments --></div>
The assignment then becomes:
$('#Comments').on('click', '.button', function(e) {
$(this).siblings('.box').toggle();
});
If additional queries arise, feel free to inquire!
Additional Note:.on applies to jQuery versions 1.7+. Utilize .live or .bind for older jQuery versions.