Появление и исчезновение определенного блока при нажатии на ссылку. Как реализовать?

Question

[alexandr kirindyasov]

https://codepen.io/3avarka4/pen/jRRRoV

Помогите с кодом, со скриптами не дружу ;)

3 блока с ссылкой и у каждого скрытый класс black.
При нажатии на ссылку нужно , чтоб появлялся этот скрытый класс , только у этого блока. Так же при повторном нажатии , исчезал.
Еще хотелось бы , чтобы появление было плавным.
Смог только реализовать , чтобы скрытый класс появлялся у всех одновременно, а это не то что нужно ;(
Заранее благодарю!

Answer 1

[Антон]

Чтобы не мучаться с parent(), проставь идентификаторы через data атрибуты
https://codepen.io/anon/pen/xeeNJN

Answer 2

[Дмитрий]

Доброе утро.

$(document).ready(function(){
  $('.trigger ').click(function(){
    //$('.black').toggle();
    $(this).parents('.block').find('div.black').fadeToggle()
  });
});