Search jQuery

jQuery Forum

Trying to target the closet selector to the click

in Using jQuery • 8 years ago

Hello! I have this section that is dynamically added to a page in Wordpress with Advanced Custom Fields if needed as many times as the layout asks. I originally only had one of these sections on the page and it worked great but now I have the issue that when there are two or more of these sections added all the slideDown/slideUp act on click of any of the buttons. I have been looking for a way to utilize .next() or .closest() but not finding the solution so that the closest div class of .layer--content_slide_out will slide down/up and not all of them. Here is my HTML code:

<section class="layer--content_slide_out">
<div class="container row">
<div class="row">
<div class="layer--content_slide_out_content">
<?php echo $layer['content_1']; ?>
<?php if($layer['has_button_content_1'] && !empty($layer['has_button_content_1'])): ?>
<a class="layer--content_slide_down_button button"><?php echo $layer['button_text_content_1']; ?></a>
<?php endif ?>
</div>
<div class="push_six layer--content_slide_out_content">
<?php echo $layer['content_2']; ?>
<?php if($layer['has_button_content_2'] && !empty($layer['has_button_content_2'])): ?>
<a class="layer--content_slide_down_button button"><?php echo $layer['button_text_content_2']; ?></a>
<?php endif ?>
</div>
</div>
</div>
</section>
<section class="layer--content_slide_down">
<div class="container row">
<div class="layer--content_slide_down_content">
<div class="left-content">
<?php echo $layer['slide_content_1']; ?>
</div>
<div class="right-content">
<?php echo $layer['slide_content_2']; ?>
</div>
</div>
<div class="close-x">
<span>X</span>
</div>
</div>
</section>

Here is my jQuery code:

/* Content Slide Out */
$('.layer--content_slide_down_button').click(FadeSlideIn);
$('.close-x').click(FadeSlideOut);
function FadeSlideIn(ID) {
$(element.target).closest('.layer--content_slide_out').nextAll(".layer--content_slide_down").stop(true, true).slideDown('slow');
}
function FadeSlideOut(ID) {
$(element.target).closest('.layer--content_slide_out').nextAll(".layer--content_slide_down").stop(true, true).slideUp('slow');
}