Ещё четыре способа скрыть и показать элементы при помощи HTML и CSS
Приквел к этой статье – «Четыре способа заставить элементы исчезнуть (и появиться) при помощи CSS» – был сосредоточен на классических техниках для скрытия элементов на странице; на этот раз используются методы, которые работают в современных браузерах, с некоторыми ограничениями для IE. Используется разметка, которая похожа на разметку из предыдущего примера:
Nastya, photographed by Sean Archer
Located deep in Siberia, the village of Oymyakon holds the title of the coldest permanently inhabited place on Earth, tied with Verkhoyansk.
From December to February, the weather in the tiny village (population 500) plummets to -50°F (-45C), with a record low of -90°F (-68C) registered in 1933. At those temperatures, a naked human left outside would freeze to death in under a minute…
В этой статье я применяю разные техники для скрытия элемента : можно протестировать эти методы в интерактивном примере в начале оригинальной статьи или перейдя по этой ссылке на CodePen.
Масштабирование элемента в 0
Очевидно, если вы делаете что-то бесконечно маленьким, это «что-то» в итоге исчезнет. Стоит отменить, что изначальная область элемента сохранится, потому что действие трансформации по сути похоже на поведение элемента с position: relative ;
Возврат значения scale в значение 1 заставит элемент появиться снова; этот переход также может быть анимирован.
Минусы: Поддерживается во всех современных браузерах, но только начиная с IE9+. Нельзя применять к строчным элементам. Для старых версий браузеров требуются префиксы.
HTML5-атрибут hidden
Хотя визуально он действует так же, как display: none , этот элемент фиксирует состояние элемента
При установке элементу, hidden указывает, что элемент еще не имеет или уже не имеет непосредственного отношения к текущему состоянию страницы.
Атрибут hidden уже используется для таких HTML5-элементов, как details . В отличие от других описанных здесь методов, атрибут hidden скрывает элемент от любых способов представления, включая печать, мобильные и скринридеры. Поддерживается всеми современными браузерами, за исключениями одного.
Минусы: Всё ещё не поддерживается в IE, хотя это легко решается в CSS при помощи селектора по атрибуту:
Нулевой height и overflow:hidden
figure#oymyakon < height: 0; overflow: hidden; >
Традиционное решение. Фактически «схлопывает» элемент по вертикали и делает его невидимым; работает при условии, что у элемента нет видимой границы. Стоит отметить, что некоторое пространство на странице для скрытого элемента, вероятно, будет «забронировано»: несмотря на то, что у элемента нет высоты, у него всё ещё есть ширина и, возможно, поле, которые могут продолжать влиять на макет страницы.
Минусы: Не применяется к строчным элементам. Значение height не может быть анимировано, хотя max — height может.
Фильтр размытия
Новейший подход, который вообще не будет работать в IE (по крайней мере на данный момент). И всё же blur – интересный вариант, который стоит рассмотреть на будущее.. Достаточное размытие делает элемент полностью невидимым, а при уменьшении значения blur до 0 элемент снова оказывается «в фокусе»
Соображения:
размытие небольшого текста работает лучше чем изображения
Размытые изображения могут добавить оставшейся части страницы оттенок цвета, в зависимости от их относительного размера и значения blur .
Чем выше значение blur , тем больше требуется вычислительных циклов для его достижения; достаточно высокие значения могут существенно загрузить графический процессор, что делает эту технику нецелесообразной для мобильных устройств на данный момент.
Поддерживается только в последней версии Firefox (35 версия – прим. перев.) (хотя есть возможность использовать SVG в качестве запасного варианта)
Всё ещё требует браузерных префиксов для Chrome и Safari.
Как уже было указано, не будет работать ни в каких версиях IE.
С этими и другими методами, рассмотренными в прошлой статье, у вас есть полный набор инструментов для создания элементов, которые появляются и исчезают на странице. Важно понимать, что не существует единственной «правильной» или «лучшей» техники: бывает лишь наиболее подходящий инструмент для конкретной задачи. Это относится и к JavaScript, у которого есть собственные методы для добавления и удаления элементов в DOM.
I have a menu and three hidden divs that show up depending on what option the user selects. I would like to show / hide them on click using only CSS. I have it working with jquery right now but I want it to be accessible with js disabled. Somebody here provided this code for someone else but it only works with div:hover or div:active, when I change it to div:visited it doesn’t work. Would I need to add something or perhaps this isn’t the right way to do it? I appreciate any help 🙂 The thing is my client wants this particular divs to slide/fade when the menu is selected, but I still want them to display correctly with javascript turned off. Maybe z-index could do the trick.
13 Answers 13
For a CSS-only solution, try using the checkbox hack. Basically, the idea is to use a checkbox and assign different styles based on whether the box is checked or not used the :checked pseudo selector. The checkbox can be hidden, if need be, by attaching it to a label .
For some reason I have this obsession with using CSS over java whenever possible, and I like this solution. Anyone else like that too?
@AlexBanman Yes. I have yet to find a cross-browser, cross-device compatible CSS-only solution I didn’t love.
How do you keep the browser from focusing (or attempting to focus) on the checkbox when clicking the label? Using this solution, my browser scrolls to the top of the page when I click the label
@froggomad You can try using display:none on the checkbox instead of absolute positioning. It definitely seems to alleviate the jumping, but I haven’t fully tested it to see if it causes any other issues.
@AlexBanman Could you ever use Java to show/hide HTML elements like this? Even when Java was widely supported by browsers, there was no reason to use it for something like this.
This can be achieved by attaching a «tabindex» to an element. This will make that element «clickable». You can then use :focus to select your hidden div as follows.
The + selector will select the nearest element AFTER the «clicker» div. You can use other selectors but I believe there is no current way to select an element that is not a sibling or child.
Although a bit unstandard, a possible solution is to contain the content you want to show/hide inside the so it can be reachable through CSS:
It halfs work for what I need since the div will also have to hide on a second click. But you gave me an idea with only CSS, thanks!
In 2022 you can do this with just HTML by using the details element. A summary or label must be provided using the summary element. details is supported by all major browsers.
Click Here for more info Here is the extra info you were looking for.
You can put your menu links horizontally = one after the other in HTML code, and then you can put all the content one after another in the HTML code, after the menu.
In other words — other solutions offer an accordion approach where you click a link and the content appears immediately after the link. The next link then appears after that content.
With this approach you don’t get the accordion effect. Rather, all links remain in a fixed position and clicking any link simply updates the displayed content. There is also no limitation on content height.
How it works
In your HTML, you first have a DIV . Everything else sits inside this DIV . This is important — it means every element in your solution (in this case, A for links, and DIV for content), is a sibling to every other element.
Secondly, the anchor tags ( A ) have a tabindex property. This makes them clickable and therefore they can get focus. We need that for the CSS to work. These could equally be DIV s but I like using A for links — and they’ll be styled like my other anchors.
Third, each menu item has a unique class name. This is so that in the CSS we can identify each menu item individually.
Fourth, every content item is a DIV , and has the class=»hiddendiv» . However each each content item has a unique id .
In your CSS, we set all .hiddendiv elements to display:none; — that is, we hide them all.
Secondly, for each menu item we have a line of CSS. This means if you add more menu items (ie. and more hidden content), you will have to update your CSS, yes.
Third, the CSS is saying that when .testA gets focus ( .testA:focus ) then the corresponding DIV , identified by ID ( #testA ) should be displayed.
Last, when I just said «the corresponding DIV «, the trick here is the tilde character ( ~ ) — this selector will select a sibling element, and it does not have to be the very next element, that matches the selector which, in this case, is the unique ID value ( #testA ).
It is this tilde that makes this solution different than others offered and this lets you simply update some «display panel» with different content, based on clicking one of those links, and you are not as constrained when it comes to where/how you organise your HTML. All you need, though, is to ensure your hidden DIV s are contained within the same parent element as your clickable links.
Как скрыть блок div средствами HTML, CSS, JS и Bootstrap
Сегодня я расскажу, как скрыть блок средствами HTML , CSS, JS и Bootstrap. Посчитал я, что, возможно, эта статья будет вам очень полезная по причине того, что вы не один раз будете сталкиваться с вопросом, как скрыть блок на сайте. На практике меня этот способ очень спасал, когда нужно было убрать какие-то элементы с сайта, которые не я делал. Да, можно поискать, в каких файлах этот блок есть и удалить вручную, но не всегда это эффективно, так как можно поломать весь php-цикл. Так вот, сегодня покажу как легко и быстро скрывать такие блоки.
Вот такой будет у нас стандартный код на HTML:
Здравствуйте, это мой блок №1.
это мой блок №2 - BlogGood.ru
Результат будет вот таким:
Можно скрыть блок, используя прозрачность « opacity »:
Можно скрыть блок, используя «visibility» со значением «hidden» :
Как скрыть элемент блока на сайте –JavaScript
Вы наверное такого нигде не видели, может этого никто и не использует, но этот способ работает и очень таки не плохо. Вставить код JavaScript нужно в самом низу веб страницы, то есть после
