How to toggle class of closest element

Question

I am using the below code to click on an image within the .process class and when clicked the .process-info with toggle class of .process--shown.

This code works; however, it will toggle the class of process--shown for all elements on the page with the class of .process-info;

I only want the element clicked on to acitivate

$(document).ready(function(){

  $(".process .process--img").click(function(){
  $(".process .process--info").toggleClass("process--shown") 
});    
  $(".process .process--info").click(function(){
    $(".process .process--info").toggleClass("process--shown") 
  });    
});

inside the click event chnage the selector from $(".process .process--info") to $(this) — DavidB, Jan 19 '18 at 11:22

score 1 · Accepted Answer · answered Jan 19 '18 at 11:22

1

Use this current element context to traverse up to common parent using .closest() then use .find()

$(".process .process--img").click(function () {
    $(this).closest(".process").find(".process--info").toggleClass("process--shown")
});

answered Jan 19 '18 at 11:22

Satpal

132,252
13
159
168

This is perfect Thanks so much ! – Jon Fuller Jan 19 '18 at 11:27
Would it be possible to add an event that removes the class shown if it is present in the Dom if an element is clicked and shown is going to be toggled to remove it from other elements – Jon Fuller Jan 19 '18 at 22:53

How to toggle class of closest element

1 Answers1

Linked