$(document).ready(function () {
$('select').change(function () {
const id = $(this).val();
const target = $(`#${id}`);
if (target.length !== 0) {
$('html, body').animate({
scrollTop: target.offset().top
}, 250);
}
});
});const select = document.querySelector('select');
select.addEventListener('change', event => {
const target = document.getElementById(event.target.value);
if (target !== null) {
target.scrollIntoView({
behavior: 'smooth'
});
}
});max-height: 300px, а при нажатии на кнопку установить большое число максимальной высоты, например max-height: 1200px. Анимировать через transition. Это самый простой вариант.элемент -> максимальная его высота), например - Map и заполнять данный массив при загрузке страницы. Максимальную высоту, естественно, высчитывать. При изменении размеров окна пересчитывать максимальную высоту. При нажатии на элемент, брать его максимальную высоту и запоминать его текущую высоту. Менять текущую высоту на максимальную. При повторном нажатии вернуть сохраненную высоту.
spread-radius у filter: drop-shadow сделают, можно будет отказаться от хака через ::after
<form action="some_url" method="POST">
<input type="text" name="username">
<button>Submit</button>
</form>const form = document.querySelector('form');
const users = ['John', 'Emily', 'Bruce', 'Alice'];
form.addEventListener('submit', event => {
const input = form.querySelector('input[type="username"]');
const index = users.indexOf(input.value);
if (index === -1) {
event.preventDefault();
} else {
input.value = index;
}
});