Как стилизовать поиск в CSS?

Question

[lonata]

Подскажите пожалуйста, как сделать так, чтобы при клике на иконку поиска появилось окно поиска, а сама иконка исчезла?


https://jsfiddle.net/r8c4xd36/

Answer 1

[Александр]

При клике на иконку добавлять класс( в котором заранее прописаны стили,например 'active') для окна поиска и так же скрывать саму иконку. Ну к примеру так:

$('.btn-search').click(function() {
	$('.popup').addClass('active');
	$(this).addClass('hide');
})

Comments

[Александр]

Скорость загрузки критична для первого экрана. Напомню, что это первые 700px.
Ваш подход подразумевает ожидание загрузки скрипта и библиотеки. Пользователь будет кликать на иконку и не понимать, почему ничего не происходит. Итог - потеря конверсии.
А вот добавив всего один checkbox в модуль и пару строчек css в шапку, первый экран будет загружаться практически мгновенно. Еще и по DOMу ползать не придется.

[lonata]

Александр, у вас я так понял код с помощью прпроцессора написан? я новичок и не понимаю,что за знаки амперсант прописаны в файле SCSS, через стандартный css можно то же самое раелизовать?

[Александр]

lonata, перенес на codepen. Там можно посмотреть конечный CSS со всеми префиксами.
Очень надеюсь, что вы разберетесь с кодом, а не тупо скопируете себе в проект.

[Александр]

Александр, Вы конечно правы и ваше решение лучше, но я думаю человеку, который задаёт подобный вопрос, будет легче понять мой вариант.

[lonata]

Благодарю за ответы!

[Александр]

Александр, дело не в том, как проще, а в том, как правильнее. Вон в РКН сделали как проще, а что получилось?

[Александр]

Александр, но стоит ли решать задачи по высшей мат-ке если не знаешь таблицу умножения?