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

Question

[narem]

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

Answer 1

[Paul_Smith]

Используйте 2й аргумент slideToggle - callback.
Я набросал, не сильно красиво, но проблему решает:

const text = 'my Text here';
const $spoilerBody = $("#spoiler > .body"); // Куда вставлять
const $spoilerBtn = $("#spoiler > .trigger"); // Кнопка сворачивания/разворачивания
function toggleSpoiler($node) {
  const isOpened = $node.data("opened");
  if (isOpened) { // Сначала сворачиваем, потом очищаем
    $node.slideToggle(200, () => $node.innerHTML = '');
  } else { // Сначала вставляем текст, потом разворачиваем
    $node.innerHTML = text;
    $node.slideToggle(200);
  }
  $node.data("opened", !isOpened); // записываем текущее состояние
}
$spoilerBtn.on("click",  toggleSpoiler);