Search jQuery

jQuery Forum

Screen name:
Tucker Joenz

Tucker Joenz's Profile

1 Posts

1 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

Trying to target the closet selector to the click
[2Replies]
- 14-Jan-2015 12:08 PM
- Forum: Using jQuery
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:
1. <section class="layer--content_slide_out">
3. <div class="container row">
5. <div class="row">
6. <div class="layer--content_slide_out_content">
7. <?php echo $layer['content_1']; ?>
8. <?php if($layer['has_button_content_1'] && !empty($layer['has_button_content_1'])): ?>
9. <a class="layer--content_slide_down_button button"><?php echo $layer['button_text_content_1']; ?></a>
10. <?php endif ?>
11. </div>
12. <div class="push_six layer--content_slide_out_content">
13. <?php echo $layer['content_2']; ?>
14. <?php if($layer['has_button_content_2'] && !empty($layer['has_button_content_2'])): ?>
15. <a class="layer--content_slide_down_button button"><?php echo $layer['button_text_content_2']; ?></a>
16. <?php endif ?>
17. </div>
18. </div>
20. </div>
22. </section>
23. <section class="layer--content_slide_down">
25. <div class="container row">
27. <div class="layer--content_slide_down_content">
29. <div class="left-content">
30. <?php echo $layer['slide_content_1']; ?>
31. </div>
33. <div class="right-content">
34. <?php echo $layer['slide_content_2']; ?>
35. </div>
37. </div>
39. <div class="close-x">
40. <span>X</span>
41. </div>
43. </div>
45. </section>
Here is my jQuery code:
1. /* Content Slide Out */
2. $('.layer--content_slide_down_button').click(FadeSlideIn);
3. $('.close-x').click(FadeSlideOut);
5. function FadeSlideIn(ID) {
6. $(element.target).closest('.layer--content_slide_out').nextAll(".layer--content_slide_down").stop(true, true).slideDown('slow');
7. }
9. function FadeSlideOut(ID) {
10. $(element.target).closest('.layer--content_slide_out').nextAll(".layer--content_slide_down").stop(true, true).slideUp('slow');
11. }

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend