Как сделать чтобы при клике срабатывал только один элемент, а не все сразу?

Question

[Олег Фурса]

Суть вопроса: имеется несколько блоков с текстом, который частично скрывается, а при нажатии разворачивается полностью. Но проблема в том, что вместо одного, разворачиваются сразу все. Как сделать так, чтоб срабатывал только кликнутый элемент.

codepen.io/Oleg_Fursa/pen/xwgQBZ

Answer 1

[Дмитрий Ковальский]

$('.text-to-show').slideToggle(300);
Тут вы говорите "Разверни все элементы с классом .text-to-show". Скрипт и развернул.
Скорректируйте селектор. К примеру $(this).prev(".text-to-show").slideToggle(300);

Comments

[Олег Фурса]

Большое спасибо за помощь и оперативность)

Answer 2

[Олег]

$('.text-to-show').hide();
$('.open-link').click(function(){
  $('.text-to-show').slideToggle(300);
  var text = $(this).text();
  $(this).text(
  text == "[развернуть]" ? "[свернуть]" : " [развернуть]");
});

$('.text-to-show-two').hide();
$('.open-link-two').click(function(){
  $('.text-to-show-two').slideToggle(300);
  var text = $(this).text();
  $(this).text(
  text == "[развернуть]" ? "[свернуть]" : " [развернуть]");
});

Ну и соответственно классы в html изменить. ) Самое деревянное решение, так как в js я практически нечего не понимаю.

Comments

[Олег Фурса]

А как же DRY-принцип)