How can I make it so that only one element works when clicked, and not all at once?

Question

JavaScript

Essence of the question: there are several blocks with text that is partially hidden, and when pressed, expands completely. But the problem is that instead of one, all unfold at once. How to make it so that only the clicked element works.

codepen.io/Oleg_Fursa/pen/xwgQBZ

Answer 1

$('.text-to-show').slideToggle(300);
Here you say "Expand all elements with class .text-to-show". Script and deployed.
Adjust the selector. For example$(this).prev(".text-to-show").slideToggle(300);

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 == "[развернуть]" ? "[свернуть]" : " [развернуть]");
});

Well and accordingly classes in html to change. ) The most wooden solution, since I practically don’t understand anything in js.