Как при клике опустить элемент а при следущем клике поднять и так до бесконечности?

Question

[Gregory]

Помогите дописать функцию:

$(document).on('click', '.genetics-link', function () {
		$('.your-info-block').css('margin-top', '150px');
	});

Необходимо, чтобы, когда кликаешь на элемент он вот так опустился на 150px, а когда в следующий раз нажмешь поднялся обратно, ну и чтобы это работало сколько угодно раз, а не один прогон.

Comments

[Сергей delphinpro]

В лоб:

var v = true;
$(document).on('click', '.genetics-link', function () {
    $('.your-info-block').css('margin-top', (v=!v, v)?'150px':'0px');
});

Answer 1

[0xD34F]

Задать элементу transition:

.item {
  transition: transform 1s;
}

Определить класс, который будет задавать смещение:

.move {
  transform: translateY(150px);
}

Переключать класс при клике:

$(document).on('click', '.item', function() {
  $(this).toggleClass('move');
});

https://jsfiddle.net/rx2tgc0m/

ИЛИ

Можно обойтись без js - перед элементом прячем чекбокс; сам элемент делаем label'ом, который будет переключать состояние этого чекбокса; смещаем элемент, если перед ним находится отмеченный чекбокс:

<input type="checkbox" id="xxx">
<label class="item" for="xxx">
  ...

input[type="checkbox"] {
  display: none;
}

input[type="checkbox"]:checked + .item {
  transform: translateY(150px);
}

https://jsfiddle.net/56y7vwjd/