Не работает jq?

Question

[Alpha12]

Привет мне нужно что бы при клике на кнопку ПОДРОБНЕЕ разворачивалось большое количесттво текста и кнопка ПОДРОБНЕЕ скользила бы в низ и на ней писало бы СКРЫТЬ
вот примерный код он доходит до первого клика, второй клик уже не работает

spoiler

<div class="wrap">
<p>Мало текста<p>

<div class="more_info">много текста</div>
<div class="more">Подробнее</div>
</div>

spoiler

$('.more').click(function(){   
     $('.more_info').addClass('active');
    $(this).addClass('up') && $(this).removeClass('more');
    $('.up').text('Свернуть');

  alert('1');
});
        $('.up').click(function(){
alert('2');
          $('.more_info').removeClass('active');

          $(this).removeClass('up') && $(this).addClass('more');
            
          $(this).text('Подробнее...');
        });

Comments

[Ankhena]

Не надо менять класс на который кликаете, при необходимости дописывайте второй (toggleClass).
Сам текст вообще можно писать в псевдоэлемент, можно прямо или через data атрибуты.

[Alpha12]

Ankhena, Как через дата атрибуты ?

[Ankhena]

Alpha12,
<button class="btn-more" data-text="текст">

content: attr(data-text);

Answer 1

[Марат Гарифуллин]

<div class="wrap">
  <p>Мало текста<p>
  <div class="more_info" style="display:none">много текста</div>
  <div class="more" data-text="Скрыть">Подробнее</div>
</div>

$('.more').on('click', function() {
  const $t = $(this);

  const text = $t.text();
  $t.text($t.data('text'));
  $t.data('text', text);

  $('.more_info').slideToggle();
});

Comments

[Alpha12]

Ааа, спасибо, работает