<script>

Hello, I found a code (bellow) to show boxes on-click, mix it a little bit and It work quite well for a box close to another, but now I would like to make a box far away apear on-click and I can’t find what I need to change, or maybe this code would not work for it…

Please, could someone tell me what this line means: “$(this).closest('.e-container').next().slideToggle();” ???

Can I change the word “closest” to something else? What are the options for that? (sorry if my english is weird, I’m a native brazilian speaker).

Thank you so much! The code I told is bellow:

<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.showme').click(function(){
**$(this).closest('.e-container').next().slideToggle();**
$(this).toggleClass('opened');
});

$('.closebutton').click(function(){
$(this).closest('.e-container').prev().find('.showme').click();
});
});
});
</script>

<style>
.showme {
cursor: pointer;
}
</style>

$(this).closest('.e-container').next().slideToggle();
I assume that the this is the element that has class showme that is getting clicked on.
.closest('.e-container') finds the ancestor element that has a class of e-container (an ancestor of the element indicated by “this” means an element that contains “this” element.
.next() goes to the next element sibling;
.slideToggle() is an animation that will make the element appear by “sliding” in or disappear by “sliding” out.

Restated:
When the element is clicked, make the element after the ancestor that has class e-container appear or disappear using a sliding animation.

I wouldn’t change “closest” to anything else because that JavaScript function/method is used to find the closest ancestor element that matches some CSS selector.

1 Like

Thank you for explaining the meaning…

So, to make a function on click that goes to a e-container in another place of the page, I need to write another function? That script is specific to find the “closest”?

Correct; you wouldn’t use $(this).closest(e-container) if you didn’t want an e-container that’s an “ancestor” (the closest ancestor). You would use a different function instead of closest if you wanted something in a different part of the page that does not contain that element that was clicked on.

1 Like