click function, css add class only on this item

问题

I have a grid with an image being grey, on hover the image get colorize (the image can not be setup as background image for information).

When Hover the image, a text appear, on click on this, I have a content which toggle.

Here are my two issues:

1 On toggle, only the image of the item have click should be colorize, actually they all get colorize unfortunatly. ( test on the first item of the secodn row)

I tried to use $(this).prev without success.

( see the code)

//** HERE THE TOGGLE FUNCTION **/

$('#toggle').click(function() {
$('.toggle').slideToggle('fast');
return false;
});

$('#toggle').click(function() {

$('.toggleaction').addClass('current');

       if($('.toggleaction').toggleClass('current')){

     $('.hide').toggleClass('displayon');
     $('img.grayscale').css('-webkit-filter', 'grayscale(0%)');


}


});

--EDIT:

got it by replacing:

$('#toggle').click(function() {
 $('.toggle').slideToggle('fast');
 return false;
 });

 $('#toggle').click(function() {

 $('.toggleaction').addClass('current');

       if($('.toggleaction').hasClass('current')){

     $('.hide').addClass('displayon');
 $('img.grayscale.oui').toggleClass('color');

 }

 });

2/ If I add more toggle section, on click of one, none of them appear . ..

Any help will be incredible !!!! If you have any suggestions, please let me know :)

To see the full code live:

http://codepen.io/anon/pen/KNRBQX

---EDIT

I got the 1/ working fine, see updated codepen

来源：https://stackoverflow.com/questions/41018941/click-function-css-add-class-only-on-this-item