Динамически изменяемое свойство высоты в javascript не работает после 2 кликов. Я хочу переключать это непрерывно столько раз, сколько я нажимаю

Question

Мой простой код, показывающий, что я делаю, приведен ниже. Я смущен, что это должно работать, но почему это не работает, как ожидалось.

const caretEl = document.getElementById("caret");
const wrapperEl = document.getElementById("wrapper");
caretEl.addEventListener("click", function() {
  caretEl.childNodes[0].classList.toggle("fa-caret-up");
  if (wrapperEl.style.height >= "20vh") {
    // wrapperEl.style.paddingBottom = "1vh";
    wrapperEl.style.height = "8vh";
    console.log("gt 20vh");
    // wrapperEl.style.overflow = "visible";
    // wrapperEl.removeAttribute("overflow");

  } else {
    // wrapperEl.style.paddingBottom = "2vh";
    wrapperEl.style.height = "20vh";
    console.log("lt 20vh");
    // wrapperEl.style.overflow = "hidden";
  }
  return wrapperEl.style.height;

})

.wrapper {
  width: 30vw;
  height: 8vh;
  overflow: hidden;
  padding-bottom: 1vh;
  margin: 20vh auto;
  border: 1px solid grey;
}

.wrapper-header {
  width: 28vw;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.caret {
  display: block;
  width: 10px;
  height: 10px;
  border: 2px solid black;
}

.content {
  margin-top: 19px;
}

<div class="wrapper" id="wrapper">
  <div class="wrapper-header">
    <p> <b>60%</b> completed. <a href="#">Check the next step</a> </p>
    <span id="caret"><i class="fas fa-caret-down"></i></span>
  </div>

  <div class="content">
    <ul>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
      <li>1</li>
    </ul>
  </div>
</div>

при нажатии на символ вставки я хочу, чтобы высота элемента div "wrapper" изменялась динамически, но код выполняется только в два раза, как кажется. и он больше не работает.

Answer 1

Я считаю, что ошибка заключается в сравнении. Поскольку «20vh» и «8vh» являются строками, а «8» находится в хронологическом порядке после «2», это приводит к тому, что любая строка, начинающаяся с «8», будет больше любой строки, начинающейся с «2», даже если она просто '8', а другое '200'.

Я думаю, что переключение вашего оператора if на:

if (parseInt(wrapperEl.style.height) >= 20)

Должно решить проблему.

Я укажу, хотя Существуют и другие решения для создания расширяемого раздела, даже с использованием только CSS, которые стоит изучить. Вот пример.