Как сделать выезжающий блок в css

Раскрывающиеся блоки с скрытым содержанием с помощью CSS3

В процессе создания сайта или блога и дальнейшего его наполнения содержанием, по разным причинам, порой возникает необходимость скрыть какую-то часть текста, разместить более объёмную информацию в спрятанный до поры до времени блок, но при этом всё же указать пользователю на то, что имеется ещё кое что, и предоставить ему возможность просмотреть скрытое содержание без перехода на следующую строку или страницу.
Раньше для реализации такого решения использовалась груда javascript, теперь же всё это можно очень легко исполнить с помощью удивительных свойств CSS3.

Сегодня мы рассмотрим простейший способ создания на страницах сайта и в отдельных сообщениях, скрытых блоков с содержанием, раскрывающихся при нажатии на определенный элемент текста, используя исключительно свойства CSS3. Переключателем может служить и отдельное слово, и выделенное словосочетание, а так же целое предложение, или информативная иконка.
Такие блоки часто используются на страницах с большим количеством содержания, для того чтобы сделать его более структурированным и компактным, все содержание при этом делится на так называемые группы, в которых на обозрение пользователю представлены только заголовки, весь текст по умолчанию скрыт и увидеть его можно нажав на определенный элемент(см. выше).

Давайте, постараемся обойтись без лишней воды, посмотрите весь этот простейший механизм в действии, на наглядном примере, так же можете и подредактировать что-нибудь при желании:

Пример №1

В роли переключателей раскрывающихся блоков с дополнительной информацией используется никак не выделенный и не обозначенный текст, с недвусмысленным предложением нажать на него, что вы без страха и сомнений обязательно сделайте, чтобы увидеть скрытый текст)))

Надеюсь, из моего сумбурного пояснения, все же стало понятно в чём вся фишка. CSS применяет новые стили (с помощью псевдокласса checked), чтобы показать блок контента, который до этого был скрыт, только тогда, когда пользователь нажимает на элемент, который связан с флажком(checkbox) по уникальному идентификатору.

Из всего этого следует важное замечание:

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

Так, на словах мы разобрали, что куда и зачем, теперь, давайте посмотрим на html-каркас всей коннструкции:

Нажмите здесь, чтобы открыть!

Далее переходим непосредственно к формированию стилей CSS, без которых вся эта конструкция работать не будет. Самый минимум кода, без какого-нибудь оформления, только чуточку выделил фон для раскрывающегося блока, чтобы определить для вас и показать рамки скрытого текста. Вы же можете оформлять блоки как вам вздумается, навесить бордюры, скруглить углы, выделить текст, или же залить фон градиентом.

1. CSS

Это всё, для аскетичного примера, вполне достаточный минимум. Но ведь, мы будем совсем не мы, если не навесим хоть каких-нибудь плюшек, да и пользователю лучше подсказать визуально, куда следует нажимать.
Во втором примере добавил простенький символ в виде плюса, который явно указывает на то, что здесь скрывается ещё что-то, при нажатии он моментально превращается в минус, а скрытым блокам с содержанием, прикрутил чуточку анимации при появлении, и всё это исключительно с помощью магии CSS3.

2. CSS

По всем раскладам, способ несомненно хорош, но как всегда, даже не удивительно нисколько, проблемы возникают с вечным тормозом прогресса, браузером IE, псевдо-класс checked поддерживают только 9-я и более современные версии этого браузера. Для старых версий IE-шки, остаётся всё по-старому, вам придётся использовать javascript.

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

Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:

Всего комментариев: 93

Проверял на Хроме и IE11, картина одна — все функционирует, но вот досаждает сам чекбокс, который все время на виду (в примере его нет), пытаюсь сообразить какая часть кода за него отвечает…

.hide <
display: none;
>
.hide <
display: none;
>

Должно быть именно display: none; и никак иначе, что касаемо данного примера.

Здравствуйте!
Есть небольшая проблема, хотелось бы чтоб после открытия первого пункта, при открытии второго, первый — автоматически скрывался. Подскажите, пожалуйста, если это возможно, то какую правку и куда нужно внести.

Здравствуйте, Алёша!
Если не особо вдаваясь в подробности, примерно так: Тынц >>
Набросал на скорую руку, посмотрите и поэкспериментируйте с параметрами,

В хроме не работает… у авторов кстати тоже…

Видимо неправильный у вас хром, всё прекрасно работает и у меня и авторов кстати тоже, пожалуйста не вводите людей в заблуждение, а для начала разберитесь с софтинами, которые пользуете. Повторяю, данный метод обрабатывают все современные и даже не очень современные браузеры… Chrome (его движок) вообще впереди планеты всей в плане поддержки новых стандартов и экспериментальных функций, более того именно под него они и пишутся изначально, а уж потом подхватываются другими движками к исполнению.

Здравствуйте!
Спасибо за интерес к теме. Нужно всё же признать, что метод пока ещё довольно сыроват для широкого использования, а с извечной браузерной нестыковкой обработки тех или иных стандартов и вовсе беда. Кроссбраузерного решения у меня на данный момент нет, этот способ скорее эксперимент, некий задел на будущее. Так что наверное пока не стоит воспринимать его как руководство к действию.

Спасибо за ответ!
После обновления в Android некоторых браузеров, этот метод заработал там, но штатный браузер пока не хочет.

Читайте также:  Как сделать рублевый перевод в рнкб

Подскажите, возможно ли анимацию прикрутить?

Возможно. Примерно так: Тынц

Добрый день!
Очень прекрасный способ реализовать раскрывающиеся блоки. Спасибо автору.
Но вот незадача, ни в одном браузере в девайсах apple не происходит раскрытия текста, т.е. плюс на минус меняется, но текст не отображается.
Подскажите плз есть ли решение?
Вопрос срочный, заранее благодарю за оперативное решение!

Способ прекрасен, на IE и семействе firefox работает, но вот наткнулся на косяк там где не ждал: в safari. Просто не разворачивается, при этом сам сафарик контент видит. Не могли бы подсказать что можно сделать?

Здравствуйте, Константин.
У меня закралась небольшая ошибка, исправил, сейчас «сафарик» открывает блоки нормально. Пропустил связку между селекторами label

подскажите пожалуйста как можно сделать так, чтобы текст внутри label менялся вместе с «+» и «-»

Можно попробовать как-то вот так:
codepen.io/NeedHate/pen/EaMevE

Приветствую! Из массы информации касательно раскрывающихся блоков здесь я все же нашла то, что работает =) НО! Первые и второй пример не сработали (смотрела на Хроме).
Использовала посему этот код: jsfiddle.net/driver/a2qtjd4r/
Однако все же…
Плюсик на минус не меняется( и при повторном клике на заголовок блока текст внутри блока не скрывается. А хотелось бы. Очень нужно, чтобы при повторном клике текст скрывался, и чтобы была возможность оставить оба (ну или больше) блока раскрытыми одновременно.
Прошу помощи)

Здравствуйте.
Удивительно, по какой причине у вас именно в Chrome не работает данное решение. Сижу, таращусь в Chrome, клацаю по переключателям, всё прекрасно работает. Тоже самое и с вариантом из комментов.
Ну да ладно, что касаемо вашего вопроса, присмотритесь к решению предложенному выше NeedHate, по моему удачное исполнение, можете только исключить смену текста внутри label при клике, если вам это не нужно.
PS: А для того чтобы при повторном клике блок с текстом скрывался, достаточно в input, атрибут type=»radio» заменить на type=»checkbox»

Здравствуйте, а есть решение когда скрытый блок появляется ниже всех пунктов меню, а не под каждым?
У меня на главной должно быть 16 разделов в 3 столбца. При нажатии на раздел должен появляться список подразделов под всеми тремя столбцами.
Спасибо.

как сделать так чтобы плюсик находился в одной строке с самим текстом?

Это единственное решение? margin не помогает, в независимости от длины текста и значений margin пишет — в одной строке плюс — ниже текст. пишу с помощью cms, видимо еще какие то свои настройки влияют, но читала все css ничего не нахожу. Что может вилять на это свойство?

Если у вас переключатель выше текста, остаётся проверить выравнивание, должно быть по левому краю float: left;

Здравствуйте. Я попробовала добавить более 2-х пунктов:

Нажмите здесь, чтобы прочитать больше о CSS!

Нажмите здесь, чтобы прочитать больше о CSS!

Нажмите здесь, чтобы прочитать больше о CSS!

Извиняюсь, при очередном обновлении, упустил одну очень важную деталь )))
Исправил исходники css, сейчас таких косяков не должно быть.

Большое спасибо! Просьба помочь: все получилось, но не склылись квадратные поля с галочками. Как их убрать?

Большое спасибо! Вы очень помогли. все получилось))

Добрый вечер! Установила на сайт в браузере Mozilla. Решила проверить в IE и хроме. Пока не обновила страницу, ничего путного не увидела. После обновления все ОК! Это нормально? Значит мой посетитель не увидит то, что должно быть пока не перезагрузит страницу? Этого же не должно быть? Спасибо.

Демо из статьи у вас в браузере работает сразу? Всё путное видите без обновления страницы?
Ну дык вот. Вы прописали весь «фарш» у себя на сайте, загрузили страницу и не увидели изменений сразу, и лишь после обновления появилось то что вы хотели увидеть. Скорее всего всё дело в кеше(если конечно кеширование у вас на сайте используется), после внесения изменений, как правило его нужно чистить(если не настроен на автомате), так что не переживайте, пользователь всё увидит в лучшем виде

Спасибо, буду надеяться.

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

Здравствуйте, Дмитрий.
Возможно, и лучше это реализовать с помощью jQuery. Набросал небольшой пример, посмотрите здесь

Добрый день, помогли, спасибо, только после установки на страницу, модуль с правым блоком съехал вниз. Подскажите пожалуйста, как можно вернуть обратно

Агромное спасибо.Как раз искал, как сделать такой блок без скриптов.

Если без особых наворотов, то примерно так: см.пример

Можно ли таким образом скрыть не просто текст, а готовую галерею с кучей фоток?
смысл такой: нажимаю на название скрытого содержимого и раздвигается готовая галерея фотографий на определенную тему, в которой фотки сами прокручиваются. нажимаю на другое название — появляется галерея с другими фотографиями. Готовые галереи у меня уже есть, только нужно их компактно разместить на сайте. Быть может есть для этого более элегантное решение? буду рад помощи и совету)

Можно, почему бы и нет. Так же можете использовать любой «аккордеон» или вкладки (табы), или же подавать галереи по принципу портфолио с фильтрацией работ.

Спасибо за оперативный ответ и шикарный сайт!
Буду пытаться воплотить в жизнь задуманное.

Уважаемый автор, подскажи, ОООчень нужно! Как сделать такое на css?
Пример:
———-
Когда я вернулся в комнату, кирпичики и соляные пирамидки были уже переложены на подоконник и Николай крылышком сметал песок с
Развернуть/свернуть текст >>
———-
При нажатии разворачивается текст, при повторном нажатии сворачивается.
Не нужно никаких рамочек, украшений, переходов и прочих наворотов.
Чисто текст, без эффектов.
Ссылка всегда находиться внизу, под текстом.
Перерыл весь инет, но все решения только на java-скриптах, что не радует.
Нужен только css.
Пытался на твоем примере сделать, но ссылка вниз не ставиться.
Выручайте, зашел в тупик))
Благодарствую заранее!!

Читайте также:  Аппликация сова на одежду своими руками

Здравствуйте, Роман.
Если я правильно вас понял, то примерно так: тынц >>

Спасибо!! Это то, что нужно!! Самое оно!!

Здравствуйте!
Изменил немного ваш скрипт так как мне нужно чтобы чекбоксы были по умолчанию раскрыты, а закрывались по нажатию. Получилось, что то вроде:
/* скрываем чекбоксы и блоки с содержанием */
.hide <
display: none;
>
.hide:checked + label

ul <
display: none;
>
/* оформляем текст label */
.hide + label <
border-bottom: 1px dotted green;
padding: 0;
color: green;
cursor: pointer;
display: inline-block;
>
/* вид текста label при активном переключателе */
.hide:checked + label <
color: red;
border-bottom: 0;
>
/* когда чекбокс активен показываем блоки с содержанием */
.hide + label + ul <
display: block;
background: #efefef;
padding: 10px;
>
Но почему то при закрытии одного, закрываются и все под ним, а те что над ним не закрываются, а я хочу чтобы закрывался каждый в отдельности.
Подскажите, что здесь не так?

Здравствуйте!
Для того чтобы все блоки были раскрыты при загрузке, достаточно в каждый input прописать атрибут checked : см. пример

Это ничто иное, как знак минус (-) в юникоде

Спасибо за ответ. А почему тогда просто было не написпть «-» или это имеет какое то значение?

Попробовал,правила перестают работать. А почему так происходит?

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

Здравствуйте, спасибо за столь подробный материал. Не могли бы Вы ответить на вопрос — можно ли таким образом сделать «спойлер в спойлере»? Или же лучше будет использовать jQuery? Просто подключать ее только ради этого не очень хочется, все же лишняя нагрузка получается.

Здравствуйте.
Спойлер в спойлере, конечно можно. Вот смотрите, набросал вам парочку примеров:
вариант-1 и вариант-2
Это всего лишь примеры, так что элементы спойлера оформите в соответствии дизайна вашего сайта

Огромное Вам спасибо за ответ! Очень помогли.

Спасибо большое за оперативность, как говорится слона-то я и не приметил.
И хоть реклама напрягает, отключил adblock на вашем сайте:)
Кстати, а не подскажете, на основе чего сделана форма комментариев на вашем сайте? Хорошо выглядит.

Спасибо за статью!
А не подскажете, как сделать так:
Нажал на «Нажмите здесь, чтобы открыть» и запись стала: «……Закрыть»

Подскажу)) В своё время, NeedHate предложил интересное решение. Применительно к способу описанному в статье, это будет выглядеть примерно так: тынц >>

olimp-nsk.ru Есть такой сайт там два раскрывающихся списка фото, в блоке «готовые» и «на заказ», клавиша «показать еще» раскрывает одновременно сразу у двух этих блоков по три ряда фото,а надо что бы открывало кадая в своем кто может сказать как поравить сей баг?Заранее благодарен за ответы

скажите а как то можно сделать чтобы например вот на этой странице biolaktis.ru/korm-dlya-po…t/biolaktis-lyx/ таблицы — их две, каждая могла так же по клику разворачиваться и сворачиваться, например «Открыть характеристики», и что куда нужно поставить? я имею в виду код. я попробовал по примеру поставил код в файл css шаблона, и html код на страницу а в него shortcod таблицы — но н ичего ен произошло (/ Спасибо.

Как развернуть все блоки?

нет, все изначально скрыты и по отдельности работают, а, нажав на отдельную кнопку-ссылку (например «раскрыть все»), нужно чтобы раскрывались-скрывались все одновременно)

Здравствуйте. Создавал свой сайт год назад. Воспользовался вашим способом оформления раскрывающихся блоков (огромное спасибо за это, кстати!), предложенным на этой странице. Год назад все работало замечательно. На своем сайте потом в течение года не заходил на страницы с этими раскрывающимися блоками, не проверял их работоспособность. Сайт на Вордпрессе сделан. За год несколько раз обновлялся. И вот теперь случайно зашел на раздел своего сайта с этими блоками и обнаружил, что они работают некорректно. При нажатии на заголовок чекбокс больше не появляется. Проверил код в Адоб Дримвивер. Там все работает. Подскажите пожалуйста, что проверить в первую очередь? Сам не могу додуматься где ошибка. Заранее благодарю.

Добрый день. Как я могу сделать, чтобы блок раскрывался и закрывался по нажатию на заголовок и одновременно с этим, при нажатии на следующий блок, предыдущий закрывался? Изначально все блоки закрыты

Здравствуйте, Кирил.
Всё довольно просто, необходимо поменять флажки type=»checkbox» на переключатели type=»radio» и добавить каждому переключателю атрибут name=»» с одинаковым именем, для блоков из одной группы, примерно так:

отличаются только идентификаторы id=»hd-1″ и id=»hd-2″
Стоит помнить, что при использовании переключателя(radiobutton), может быть отмечен только один элемент группы, а стало быть закрыть с помощью повторного клика не получится, а только при нажатии следующий кнопки.
Посмотрите пример: Тынц

Спасибо за оперативный ответ. Это я понимаю. Хотелось сделать и то и другое, жаль, что на css нет такой возможности

Очень доходчиво, красиво и по делу
Спасибо!!

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

Добрый день! Подскажите можно ли в скрытый div вставить ссылку на другую страницу сайта.те Если да, то как? У меня при вставке скрытый div становится видимый. Спасибо.

Читайте также:  Авточехлы на ваз 2107 своими руками

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

Спасибо за быстрый ответ! Отдельно работает всё как надо), но как только вставляю в сайт, первый скрытый бокс развернутый(. а остальные все закрытые и вродь даже работают.

Добрый день!Подскажите,можно ли input и label обернуть в div?Если да,то как в таком случае сделать, чтобы отображалось скрытое содержание.
Нажмите здесь, чтобы прочитать больше!.
Скрытое содержание…

Как можно сделать чтобы при переходе по ссылке на эту страницу открывался нужный блок?

Не подскажете, как вставить такой текст на страницу вордпрес?
Вставляю код css в style.css и код html на саму страницу — не выходит.

Благодарю за помощь! применила ваше решение для старенького полурабочего) сайта.

Добрый день, подскажите, можно сделать так, чтобы скрытый блок открывался в другом мечте, т.е. вне этого блока, а допустим в конце странице?

Источник

3 февраля 2014 | Опубликовано в css | 11 Комментариев »

В этом уроке мы покажем, как создать полупрозрачный слой, который накрывает всю страницу, и блок сообщений, который может быть закрыт. Затем мы добавим библиотеку jQuery, которая заставит появляться накрывающий слой и выезжать из верхнего края страницы блок сообщений. Посмотрите демонстрацию работы по ссылке.

Нам нужно всего два элемента в нашем html-коде: блок для накрывающего слоя и блок для блока сообщений. В блоке сообщений будет ссылочный элемент для уменьшенного изображения закрывающей кнопки и текст. И вот что получается:

Так как мы будем ссылаться на эти два основных элемента позже в JavaScript, нам нужно дать им идентификаторы. Вы можете разместить блоки для накрывающего слоя и блока сообщений где Вам удобно, прямо в элементе body.

У накрывающего слоя есть тэг стиля display:none, так как мы хотим, чтобы изначально он был невидимым. Со свойством видимости блока сообщений мы разберемся в CSS.

Давайте добавим стилей.

Для накрывающего слоя мы просто используем повторяющееся прозрачное изображения. Мы также можем просто задать ему темный цвет фона и сделать его прозрачным с помощью свойств CSS, но здесь мы будем использовать изображение:

Здесь мы растягиваем этот блок, задавая ему позицию 0 со всех сторон. Так что не важно, насколько широкое окно у браузера, эти свойства всегда растянут его на всю страницу. Использование свойства position:fixed будет всегда держать блок на одном месте, вне зависимости от прокрутки страницы. Если бы мы использовали свойство position:absolute, наш блок накрывал бы только верхнюю видимую часть страницы, но не включал нижнюю часть страницы, видимую после прокрутки. Значение свойства z-index должно быть очень высоким, чтобы поместить этот элемент выше других элементов, кроме блока сообщений.

У блока сообщений будут такие свойства CSS:

Мы снова задаем фиксированное положение блока, так как нам нужно, чтобы блок сдвигался, когда мы прокручиваем страницы. Мы устанавливаем отрицательное значение свойству top, так как нам нужно, чтобы блок сообщений был вне нашего окна, т. е., чтобы он был невидим вначале. Мы не задаем свойство display:none, так как мы хотим, чтобы блок сообщений появлялся, выезжая из верхнего края, поэтому нам нужно поработать с позиционированием.

Чтобы поместить элемент в центр страницы, мы просто задаем ему одинаковые расстояния справа и слева. Использование процентов позволяет хорошо адаптировать элемент ко всем размерам экрана, не забывайте, что они могут сильно отличаться.

Свойства CSS3 добавят скругления углам и тени блоку сообщений. Но они будут работать не во всех браузерах.

Значение свойства z-index должно быть больше, чем у накрывающего слоя. Так что мы просто добавим к нему единицу. Убедитесь, что у Вас нет элементов с абсолютным позиционированием с более высоким значением свойства z-index.

У закрывающего крестика блока сообщений будут такие стили:

У элементов с тегом h1 будут следующие свойства:

Мы снова устанавливаем здесь отрицательные внешние отступы, чтобы вытолкнуть элемент. Заметьте, что свойства CSS3 для браузера Mozilla могут быть записаны кратко.

Это все, что касается CSS, теперь давайте приступим к классному JavaScript.

JavaScript

Следующий код добавляется в конце файла html, прямо перед закрытием тега body:

Элемент #activator применяется к каждому элементу на странице, который должен вызвать накрывающий слой и появление блока сообщений. В примере мы просто добавили ссылочный элемент со стилями с таким идентификатором.

Когда на запускающий элемент нажимают, накрывающий слой должен появиться очень быстро, и после этого другая функция должна выполниться, заставляя блок сообщений выехать из верхнего края. Это то, что делает функция animate(). Дальше мы указываем, что значение свойства top должно быть 160 пикселей, что означает, что мы хотим, чтобы блок сообщений передвинулся с его текущего положения на положение top:160px, и что это должно занять 500 миллисекунд.

После того, как накрывающий слой и блок сообщений появились, мы хотим иметь возможность закрыть блок сообщений, нажимая на уменьшенное изображение крестика. Функция, которая это делает, сначала заставит блок сообщений уехать вверх на его старое положение top:-200px, а после этого заставит исчезнуть накрывающий слой.

И это все! Попробуйте поэкспериментировать со скоростью появления элементов. Вы также можете заменить значение fast на любое значение в миллисекундах. И Вы можете сделать так, чтобы блок сообщений выезжал слева или справа, для этого Вам только нужно изменить начальные значения и значения в функциях JavaScript.

Источник

Оцените статью
Как сделать своими руками
Adblock
detector