Как изменить высоту элемента по одному клику и вернуть обратно по второму клику на jQuery?

Question

[Чак Торнтон]

Привет. Не так давно с JS и jQuery. Вопрос такой:

Появилась задача передо мной. Есть много элементов на странице с одинаковым классом. Необходимо по клику на один элемент менять только его высоту и по второму клику, возвращать к исходной.
Изменение высоты я решил, чтобы увеличивался только один. Как я понял, в этом помогает (this).
Но вот как сделать простейшую конструкцию if - else с этим this, чтобы это работало, никак не могу понять. Подскажите, если кто знает, как это реализовать, сам хоть научусь.

Ссылка Demo на JSfiddle

Это HTML:

<div class="er">
  <div class="qwerty">
     <div class="uiop">Тут инфа № 1</div>
  </div>
</div>
<div class="er">
  <div class="qwerty">
    <div class="uiop">Тут инфа № 2</div>
  </div>
</div>
<div class="er">
  <div class="qwerty">
    <div class="uiop">Тут инфа № 3</div>
  </div>
</div>

Это JS:

var er = ('.er');
var qwerty = ('.qwerty');



  $(document).ready(function() {

    $(qwerty).on('click', function() {
      $(this).height(300).css({
         cursor: "pointer",
   	 backgroundColor: "green",
    	overflow: "auto"
      });
    });

  });

Это CSS:

body {
  background: #fff;
  padding: 20px;
  font-family: Helvetica;
  display: flex;
  flex-direction: column;
}

.qwerty {
  background: #436344;
  border: 1px solid black;
  border-radius: 4px;
  padding: 20px;
  font-size: 25px;
  text-align: center;
  margin: 10px;
  height: 110px;
  width: 300px;
  display: flex;
  cursor: pointer;
}

Answer 1

[0xD34F]

Выносите все стили в отдельный css-класс:

.active {
  height: 300px;
  cursor: pointer;
  background-color: green;
  overflow: auto;
}

И добавляете/удаляете его при клике:

$('.qwerty').on('click', function() {
  $(this).toggleClass('active');
});

Comments

[Чак Торнтон]

Как я понял, это работает, если высота не указана изначально.
А если у моих блоков высота разная? Может перезаписывать уже существующую высоту?
Вот как сейчас работает, с Вашей подсказкой: jsfiddle.net/sgtchr9L/1

[Чак Торнтон]

Ну т.е. он не перезаписывает уже существующие параметры. width, overflow и др.

[0xD34F]

Чак Торнтон, разместите добавляемый класс после основного, или повысьте специфичность правила, указывая классы вместе:

.qwerty.active {
  height: 300px;
  cursor: pointer;
  background-color: green;
  overflow: auto;
}

[Чак Торнтон]

0xD34F, Да, спасибо. Все получилось)