Как получить div, чтобы свернуть

Question

Получить парни,

Следующий код работает нормально, когда щелкает div, но мне нужно, чтобы он закрывался при повторном нажатии кнопки

здесь JS

<script type="text/javascript">
function slide(){
document.getElementById("sliding").style.maxHeight = "1000px";
}
</script>

здесь css

#sliding{
    transition: 0.5s;
    max-height: 0px;
    overflow: hidden;
}

и html

 <button onclick ="slide();" class="btn btn-primary">ADD COMMENT</button> 



  <div id = "sliding">
    <p>TEST</p>
    </div>

может кто-нибудь помочь мне скрыть div при нажатии на кнопку еще раз?

спасибо за тонну заранее

Answer 1

Вы можете включить проверку в функцию, чтобы увидеть текущий maxHeight и изменить состояние maxHeight на основе результата. Примерно так: используйте операторы неравенства на случай, если позже вы решите изменить свой maxHeight.

function slide(){
  elem = document.getElementById("sliding");
  elemHeight = elem.style.maxHeight;
  elemHeight.replace("px", "");

  if (elemHeight > "0") {
    elem.style.maxHeight = "0px";
  }
  else {
    elem.style.maxHeight = "1000px";
  }
}

Answer 2

Вы можете использовать метод classList.toggle.

function slide(){  document.getElementById("sliding").classList.toggle('sliding-show')
}

#sliding{
    transition: 0.5s;
    max-height: 0px;
    display: none;
}

#sliding.sliding-show {
  display: block;
  max-height: 1000px;
}

<button onclick ="slide()" class="btn btn-primary">ADD COMMENT</button> 



  <div id="sliding">
    <p>TEST</p>
    </div>

Answer 3

Добавить состояние к вашему динамически измененному html.

Существуют различные подходы. В следующем коде используется значение css свойства maxHeight для div, чья видимость переключена, свойство, которое в любом случае изменяется при превращении текста в видимый.

Это не самый чистый способ сделать это но покажет принцип и сохранит минимальные изменения в данном коде:

function slide(){
    if (parseInt(document.getElementById("sliding").style.maxHeight) === 0) {
        document.getElementById("sliding").style.maxHeight = "1000px";
    } else {
        document.getElementById("sliding").style.maxHeight = "0px";
    }
}

    #sliding{
    	transition: 0.5s;
    	max-height: 0px;
    	overflow: hidden;
    }

     <button onclick ="slide();" class="btn btn-primary">ADD COMMENT</button> 
     <div id = "sliding">
        <p>TEST</p>
     </div>