Возможно ли с помощью только CSS скрывать/отображать блоки на странице, в зависимости от выбора в выпадающем списке?

Question

[ian14]

Здравствуйте. Недавно ознакомился с примерами создания модальных окон, спойлеров и пр. на "чистом" CSS, без использования скриптов. Идея понравилась, в связи с чем возник вопрос: возможно ли при помощи CSS сделать форму такого типа?



В поисковой форме, записанной в html, при выборе в выпадающем списке в блоке #1 (тип недвижимости) выбираем "квартира", при этом блок #2 (машиноместа) становится невидимым, а если выбрать в первом списке другой пункт, например, "гараж", то этот же блок #2 (машиноместа) уже должен отобразиться на странице. Реально ли сделать такое с помощью только CSS?

https://jsfiddle.net/c9496a6k/2

Answer 1

[Stepanya]

не надо бизнес логику перекладывать на отображение

Comments

[ian14]

И причем тут бизнес-логика? Спрашивается возможно ли реализовать такое на css, без js

[Stepanya]

ian14: сложно, криво, но можно.

Answer 2

[Егор Живагин]

Нет, это невозможно
С помошью css можно влиять либо на блок, стоящий после изменённого, либо на вложенные в него. При выборе в одного из блоков не меняется вообще ничего, никаких checked, active , ... Не за что зацепиться.
Но даже если бы и было, можно было бы влиять разве что на следующий .

Честно говоря, вызывает недоумение такая тяга избежать JS-a. Не, я тоже табы или модалки периодически на CSS пилю, но только если это действительно упрощает и не выглядит как костыль. А тут три строчки на jQuery , может строчек 10 на нативном JS

Comments

[Сергей delphinpro]

ну почему сразу "невозможно"?
можно все блоки поместить в один поток и абсолютом спозиционировать.

тут нужно уточнение - в реальных проектах невозможно =)
а поиграться для прокачки скиллов - пожалуйста.

[Егор Живагин]

Сергей: я тоже об этом подумал) Но в jsfiddle элемент в разметке - select, и как я ни старался, вложить div после одного из option у меня не получилось. А если заменить select, то без js уже не обойтись

[Сергей delphinpro]

Егор Живагин: Селект можно собрать из тех же радиокнопок. нужно только проявить фантазию =)
Но нах оно нужно...

[Егор Живагин]

Сергей: вот это жесть, конечно...
Будет время - сделаю. Заинтриговался) Смеху ради, не более

[Сергей delphinpro]

Егор Живагин: в принципе полезно заниматься такой херней в свободное время. лучше начинаешь понимать как что работает, учишься нестандартно мыслить, плюс какие-то "изобретенные" техники можно будет в дальнейшем использовать в реальных проектах.

[ian14]

Егор Живагин: может тогда подскажете, как осуществить это с помощью jQuery или JS на имеющемся примере?

[Егор Живагин]

ian14:

Залил ваш код в codepen и добавил jQuery .

html не менял . Осталось сделать изначально блоки скрытыми и класс active с display: block

[ian14]

Егор Живагин: спасибо большое! Сегодня попробую разобраться

[ian14]

Егор Живагин: Добрый день! Не подскажите, есть ли способ сохранить выбранные пункты в этих блоках после перезагрузки страницы? То есть после нажатия на кнопку "Поиск" идет загрузка результатов на другой странице, там галочки сбрасываются. Вот бы найти возможность сохранять отмеченные пункты и сбрасывать их по нажатию кнопку "Очистить". Вот пример: ***

[Егор Живагин]

ian14: записывайте выбор в cookies . При загрузке страницы проверяйте cookies и отмечайте пункты нужные ) Это можно быстро нагуглить

[ian14]

Егор Живагин: спасибо еще раз! Сейчас буду изучать ))