Как сделать плавное смещение блоков при нажатии на кнопку?

Хм, очень любопытное решение, попробую развить. Спасибо. Есть еще какая-нибудь интересная информация по типу этой?

Soulism: Есть еще jQuery.animate() api.jquery.com/animate
Делает примерно то-же самое, но средствами js. С тех пор как transition поддерживается всеми браузерами он уже практически не нужен.

Stalker_RED: Сейчас копаюсь в кусочке кода на jsfiddle, но не могу все же сам без знаний сделать как надо. Как сделать так, чтобы при нажатии на кнопки выскакивал следующий элемент по списку? Или несколько элементов, а прошлые убирались. Нельзя как-нибудь это автоматизировать, чтобы, допустим, следующий по расположению в коде блок с input'ами вылезал после нажатия на кнопку? Или все лишь вручную?

Stalker_RED: А то если этих инпутов штук 20, то получится довольно муторно

Soulism: Можно что-то придумать. Например, генерировать эти инпуты на лету, при помощи js. Или создать их заранее, обернуть все в контейнер с overflow: hidden и фиксированной высотой, а тем что "уехали" убирать еще и высоту. Можно и другие способы изобрести, это первое что в голову пришло.

https://jsfiddle.net/Stalk/pgawqtuz/4/

Stalker_RED: Спасибо за наводку и за то, что не ленитесь для меня строчить коды:)
Последний вопрос, думаю.
Как в этот скрипт добавить еще одну строку кода? Хочу чтобы при нажатии на кнопку сразу у двух элементов менялся класс, но что-то не выходит

var buttons = document.querySelectorAll('input[type="button"]');
[].forEach.call(buttons, function(btn){
btn.addEventListener('click', function(e){
e.target.closest('.input-group1').className = ' wrooom1'
ВОТ СЮДА ДОБАВИТЬ ТАКУЮ ЖЕ СТРОКУ, ЧТО ВЫШЕ, НО С ДРУГИМИ КЛАССАМИ. КАКИЕ ПРАВИЛА ДЛЯ JS ЕСТЬ?
})
})

Soulism: И конечно никто не мешает добавить побольше эффектов, менять еще и opacity, например.

Soulism:

e.target.closest('.input-group').className += ' wrooom'

В данном случае у события клика по кнопке "e" мы смотрим какой элемент был кликнут (e.target), затем ищется ближайший родительский блок с классом input-group, и ему меняется класс.

Вы зачем-то подописывали циферки к классам, я не могу понять зачем.
А на вопрос "КАКИЕ ПРАВИЛА ДЛЯ JS ЕСТЬ?" ответить довольно сложно. Разве что ссылки дать на справочники:
https://developer.mozilla.org/ru/docs/Web/JavaScri...
https://learn.javascript.ru/first-steps

Или я неправильно понял смысл вопроса.

Stalker_RED: циферки - это я с классами игрался, ничего криминального:)
Можете написать маленький кусочек кода, который менял бы классы у двух элементов при нажатии на одну определеную кнопку? Я был бы бесконечно счастлив

Soulism: У двух каких элементов? Менял на одни и те-же, или на разные?

Soulism: В простейшем случае

document.querySelector('#elem1').className += ' foo'
document.querySelector('#elem2').className += ' bar'

Stalker_RED: У двух каких-либо элементов, любых. Чтобы в скрипте можно было подставить их ID, например, и все. Менял (или добавлял, как я понял добавить это +=, а поменять просто = ) - на разные классы.

Stalker_RED: круто, вроде получилось. Спасибо большое за помощь

Soulism: Ну вон выше я привел пример выборки по id и добавления класса.
С jQuery.addClass() и .removeClass() вы уже знакомы ведь?

Stalker_RED: Разве что слегка знаком

Stalker_RED: Вот чего выходит) Отличная база. Спасибо еще раз.
https://jsfiddle.net/pgawqtuz/8/