Javascript: в div нажмите "увеличить высоту div", а во втором - "свернуть высоту div"?

#javascript #css

Вопрос:

У меня есть следующий javascript, который регулирует высоту моего div при нажатии пользователем trend_exp_bt .

На данный момент это работает нормально. Однако, если пользователь нажмет trend_exp_bt еще раз, я хочу сбросить высоту div (130px).

Пожалуйста, может кто-нибудь показать мне, как это сделать, я пытался посмотреть функцию переключения в Google, но, похоже, у меня это не работает.

 <script>
    $('.trend_exp_bt').click(function(){
    $('.trending_contain').animate({height:'500'})
    $('.trend_exp_bt').css("line-height", "30px");
    $('.trend_exp_bt').html("amp;and;");

})
</script>

Ответ №1:

Может быть, переключение класса сработало бы для вас?

 document.getElementById('trend_exp_bt').onclick = function() {
  document.getElementById('exp-panel').classList.toggle('expanded')
}

 .panel {
  width: 250px;
  height: 130px;
  border: 1px solid blue;
  background-color: lightgrey;
  transition: all 0.3s;
}

.expanded {
  height: 300px;
}

 <button id="trend_exp_bt">Expand</button>
<div id="exp-panel" class="panel">
</div>

Ответ №2:

Если вы хотите использовать обработчики кликов, вам придется удалить обработчик «развернуть» и добавить обработчик «свернуть» после его развертывания. Вам нужно будет сделать обратное, когда пользователь сворачивает элемент div.

 function expandDiv() {
    $('.trending_contain').animate({height:'500'});
    $('.trend_exp_bt').css("line-height", "30px");
    $('.trend_exp_bt').html("amp;and;");
    $('.trend_exp_bt').off('click').on('click', collapseDiv)
}

function collapseDiv() {
    $('.trending_contain').animate({height:'200'});
    $('.trend_exp_bt').css("line-height", "30px");
    $('.trend_exp_bt').html("amp;or;");
    $('.trend_exp_bt').off('click').on('click', expandDiv)
}

$('.trend_exp_bt').click(expandDiv);