0

Как при клике на элемент увеличить его высоту?

#header {
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: crimson;
  color: white;
}
<div id="header">Header</div>

0

3 ответа 3

5

Два примера сразу

document.querySelector(".item2").onclick = function() {
  document.querySelector(".item2").classList.toggle("go");
}
document.querySelector(".item1").onclick = function() {
  document.querySelector(".item2").classList.remove("go");
}
.item1,
.item2 {
  width: 200px;
  height: 50px;
  background: red;
  transition: 0.34s linear;
  margin-top: 10px;
  display: inline-flex;
  cursor: pointer;
}

.item1:focus {
  outline: none;
  border: none;
  height: 100px;
  background: darkred;
}

.go {
  background: blue;
  height: 100px;
}
<div class="item1" tabindex="1"></div>
<div class="item2"></div>

2

Могу предложить пару вариантов на jQuery, вариант на чистом JavaScript, а также вариант на CSS.

И так, поехали:

Вариант на jQuery №1

$("#header").click((function() {
  var i = 0;
  return function() {
    $(this).animate({
      height: (++i % 2) ? 100 : 20
    }, 400);
  }
})());
#header {
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: crimson;
  color: white;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="header">Header</div>

Вариант на jQuery №2

$(".header").click(function() {
  $(this).toggleClass("active");
});
.header {
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: crimson;
  color: white;
  transition: height 0.4s;
}

.active {
  height: 100px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="header">Header</div>

Вариант на JavaScript

function classToggle() {
    this.classList.toggle('header__20');
    this.classList.toggle('header__100');
}
document.querySelector('#header').addEventListener('click', classToggle);
#header {
  line-height: 20px;
  text-align: center;
  background: crimson;
  color: white;
}
.header {
  height: 20px;
  transition: height 0.4s;
}
.header__20 {
  height: 20px;
}
.header__100 {
  height: 100px;
}
<div id="header" class="header">Header</div>

Вариант на CSS

#container .header {
  height: 20px;
  line-height: 20px;
  text-align: center;
  background: crimson;
  color: white;
  transition: all 0.5s ease-out;
}

#checkbox {
  position: absolute;
}

#checkbox:checked~.header {
  height: 100px;
  transition: all 0.4s ease-in;
}
<div id="container">
  <input type="checkbox" id="checkbox" />
  <div class="header">Header</div>
</div>

1

Думаю самый простой из вариантов:

const header = document.querySelector('#header');
    header.addEventListener('click', e => {
     let target = e.target;
     target.style.height = ''; //здесь значение на которое хочешь поменять
    });

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.