Trying to target the closet selector to the click
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');
- }