Как сделать добавление элемента в конец с эффектом спойлера?

107

09 февраля 2021, 09:00

Я знаю, что для спойлера есть функция .slideToggle и для добавления в конец .append, но не могу понять, как их совместить. Нужно, что бы кусок текста добавлялся в конец, и по второму нажатию убирался (удалялся в последствии).

Answer 1

Как-то так

let w = "<p>Where is h4?</p>"; 
$(w).hide().appendTo('section').fadeIn(4000);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<section> 
  <h3>h3</h3> 
  <h5>h5</h5> 
  <h6>h6</h6> 
</section>

И по нажатию..

let w = "<p class='question'>Where is h4?</p>"; 
$(w).hide().appendTo('section').fadeIn(4000); 
$('button').on('click', function(){ 
  $('.question').fadeToggle(4000); 
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> 
<section> 
  <h3>h3</h3> 
  <h5>h5</h5> 
  <h6>h6</h6> 
</section> 
<button type="button">Click me!</button>