Пустое пространство после slideToggle()

Question

Как убрать пустое пространство, которое возникает после вызова функции slideToggle()? Реализовываю to-do list, чтобы по нажатию стрелочки прятать описание воспользовался функцией slideToggle, но после на месте блока остаётся пустое пространство. Предполагаю, что элемент лишь делается невидимым, но тогда как по-другому реализовать сворачивание по нажатию кнопки?

$(function() {

  $('#tasks').on('click', '.krest', function() {
    $(this).parents('.toDo').remove();
  });

  $('#tasks').on('click', '.arrow', function() {
    $(this).parents('.toDo').find('.secondTask').slideToggle();
    if ($(this).parents('.toDo').find('.arrow').attr('src') === "arrow.png") {
      $(this).parents('.toDo').find('.arrow').attr('src', "arrow_2.png");
    } else {
      $(this).parents('.toDo').find('.arrow').attr('src', "arrow.png");
    }
  });

  $('button').click(function() {
    var taskDescription = $('textarea').val();
    var taskName = $('input').val();
    console.log(taskName, taskDescription);
    var task = $('<div class="toDo"></div>')
      .append('<div class="mainTask">' +
        '<h4>' + taskName + '</h4>' +
        '<img class="krest" src="krest.png">' +
        '<img class="arrow" src="arrow.png">' +
        '</div>' +
        '<hr>' +
        '<div class="secondTask">' +
        '<p>' + taskDescription + '</p>' +
        '</div>')


    $('#tasks').prepend(task);
  });

  $('button').click(function() {
    $('form').get(0).reset();
  });
});

html,
body {
  margin: 0;
  padding: 0;
  background-color: #f5f5f5;
  min-width: 960px;
  font-family: Arial;
}

#main-container {
  width: 960px;
  margin: 0 auto 0 auto;
}

form {
  width: 470px;
  float: right;
  padding: 0;
  height: 500px;
  background-color: white;
}

form input {
  width: 390px;
  margin-left: 40px;
  background-color: #fcfcfc;
  border: 1px solid #f6f6f6;
  outline: none;
}

form textarea {
  width: 390px;
  height: 230px;
  resize: none;
  margin-left: 40px;
  background-color: #fcfcfc;
  border: 1px solid #f6f6f6;
  outline: none;
}

form p {
  color: #8993ad;
  margin-left: 40px;
  font-size: 14px;
  margin-top: 30px;
}

form button {
  width: 224px;
  margin-left: 40px;
  height: 55px;
  background-color: #2174fd;
  color: white;
  border: none;
  font-size: 16px;
  margin-top: 30px;
  margin-bottom: 30px;
}

header {
  width: 960px;
  margin: 0 auto 0 auto;
  height: 114px;
  font-size: 21px;
}

#headerLeft {
  width: 470px;
  float: left;
  padding: 0;
  display: inline-block;
}

#headerRight {
  width: 470px;
  float: right;
  padding: 0;
  display: inline-block;
}

.toDo {
  overflow: hidden;
  width: 470px;
  height: 136px;
  margin-bottom: 20px;
  font-size: 16px;
  position: relative;
}

.mainTask {
  overflow: hidden;
  width: 470px;
  height: 50px;
  background-color: white;
}

.secondTask {
  overflow: hidden;
  width: 470px;
  height: 85px;
  background-color: white;
}

hr {
  margin: 0;
  padding: 0;
}

.toDo h4 {
  margin-left: 20px;
  margin-top: 18px;
  font-weight: normal;
  display: inline-block;
}

.krest {
  display: inline-block;
  margin-left: 22px;
  position: absolute;
  margin-top: 21px;
}

.arrow {
  position: absolute;
  right: 22px;
  margin-top: 24px;
}

.toDo p {
  margin-left: 20px;
  margin-top: 18px;
  font-size: 14px;
  color: #8993ad;
}

hr {
  border: none;
  background-color: #f6f6f6;
  color: #f6f6f6;
  height: 1px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!DOCTYPE html>
<html lang="ru">

<head>
  <title>Homework Skillbox</title>
  <link rel="stylesheet" href="style.css">
  <link rel='icon' href="favicon.ico" type="image/x-icon">
  <script src="jquery-3.6.0.min.js"></script>

  <script src="script.js"></script>
</head>

<body>
  <header>
    <p id='headerLeft'>Список дел:</p>
    <p id='headerRight'>Добавить новое дело</p>
  </header>
  <div id="main-container">
    <form>
      <p>* Название </p>
      <input type="text" name="title" maxlength="48">
      <p>* Описание </p>
      <textarea></textarea>
      <button type="button">Добавить дело</button>
    </form>
    <div id="tasks">
    </div>
  </div>
</body>

</html>

БЛОГ НА HUSL

Пустое пространство после slideToggle()

Ответы (0 шт):