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

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/