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

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

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

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

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

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

Пример №1

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

 
Как видите всё более-чем прекрасно работает, скрытое содержание, как появляется без проблем, так и исчезает от легкого нажатия мышкой, и при этом мы задействовали самый минимум исполняемого кода, и в html-каркасе, и в формировании стилей css. Без подключения дополнительных javascript библиотек, с извечной тревогой, а не отключены ли они на стороне пользователя.
Реализовать всё это действо, стало возможным благодаря CSS3 псевдоклассу :checked, применяемым к элементам интерфейса, таким как переключатели (). Что мы собственно и сделали, в теге <input type="text" /> атрибуту type мы присвоили значение checkbox, а так же идентификатор id="hd-1" соответствующий уникальному идентификатору for="hd-1" переключателя текущего блока. Чекбоксы спрячем основательно и навсегда, прописав в классе .hide свойство display: none;
Собственно здесь, объяснять-то особо и нечего, весь механизм включения и выключения скрытых блоков состоит из трех элементов:

  • Флажок (Checkbox) — тег <input type="text" /> со значением checkbox атрибута type и с определённым связующим идентификатором
  • Заголовок (текст переключатель) — тег <label></label> со значением уникального идентификатора для атрибута for, (идентификатор обязательно должен быть таким же, как идентификатор тега input со значением checkbox атрибута type).
  • Блок с содержимым — тег div, в котором и будет содержаться до лучших времен, пока пользователь не кликнет, различный скрытый контент (текст, изображения и т.д. и т.п.)

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

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

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

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

<input class="hide" id="hd-1" type="checkbox" >
<label for="hd-1">Нажмите здесь, чтобы открыть!</label>
<div>Скрытое содержание......</div>
<input class="hide" id="hd-2" type="checkbox" >
<label for="hd-2">Нажмите здесь, чтобы прочитать больше!</label>
<div>Скрытое содержание...</div>

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

1. CSS

/* скрываем чекбоксы и блоки с содержанием */
.hide, .hide + label ~ div {
    display: none; 
}
/* вид текста label */
.hide + label,
.hide:checked + label {
    padding: 0;
    color: green;
    cursor: pointer;
    border-bottom: 1px dotted green;
}
/* вид текста label при активном переключателе */
.hide:checked + label {
    color: red;
    border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием  */
.hide:checked + label + div {
    display: block; 
    background: #efefef;
    -moz-box-shadow: inset 3px 3px 10px #7d8e8f;
    -webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
    box-shadow: inset 3px 3px 10px #7d8e8f;
    padding: 10px; 
}

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

2. CSS

/* скрываем чекбоксы и блоки с содержанием */
.hide,
.hide + label ~ div {
    display: none;
}
/* вид текста label */
.hide + label {
    margin: 0;
    padding: 0;
    color: green;
    cursor: pointer;
    display: inline-block;
}
/* вид текста label при активном переключателе */
.hide:checked + label {
    color: red;
    border-bottom: 0;
}
/* когда чекбокс активен показываем блоки с содержанием  */
.hide:checked + label + div {
    display: block; 
    background: #efefef;
    -moz-box-shadow: inset 3px 3px 10px #7d8e8f;
    -webkit-box-shadow: inset 3px 3px 10px #7d8e8f;
    box-shadow: inset 3px 3px 10px #7d8e8f;
    margin-left: 20px;
    padding: 10px;
    /* чуточку анимации при появлении */
     -webkit-animation:fade ease-in 0.5s; 
     -moz-animation:fade ease-in 0.5s;
     animation:fade ease-in 0.5s; 
}
/* анимация при появлении скрытых блоков */
@-moz-keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }
}
@-webkit-keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }
}
@keyframes fade {
    from { opacity: 0; }
to { opacity: 1 }   
}
.hide + label:before {
    background-color: #1e90ff;
    color: #fff;
    content: "\002B";
    display: block;
    float: left;
    font-size: 14px; 
    font-weight: bold;
    height: 16px;
    line-height: 16px;
    margin: 3px 5px;
    text-align: center;
    width: 16px;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
}
.hide:checked + label:before {
    content: "\2212";
}

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

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

С Уважением, Андрей

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

Google Bookmarks News2.ru БобрДобр.ru RUmarkz Ваау! Memori.ru rucity.com МоёМесто.ru Mister Wong

Вы можете оставить отзыв, подписаться на обновленияОбновления блога по RSSRSS или Обновления блога на TwitterTwitter !

71 комментарий
  1. Дмитрий:

    Извините, я пока что новичок в этом деле поэтому пытаюсь разобраться. А что означает content: /2212; ?

    Ответить
    • driver:

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

      Ответить
      • Дмитрий:

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

        Ответить
        • driver:

          Можно написать и «-», сравните визуально результат и найдите пару отличий

  2. Дмитрий:

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

    Ответить
  3. Сергей:

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

    Ответить
  4. Руслан:

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

    Ответить
    • driver:

      Здравствуйте.

      Спойлер в спойлере, конечно можно. Вот смотрите, набросал вам парочку примеров:

      вариант-1 и вариант-2

      Это всего лишь примеры, так что элементы спойлера оформите в соответствии дизайна вашего сайта

      Ответить
  5. Добрый день. Хорошая статья — всё написано понятно, но не работает.

    Специально вставил всё с примера — блок отображается некорректно, просто чекбокса нет, остальное как-будто не применяется:

    http://sovetsovetov.ru/test-2

    Начал читать — WP как-то очень криво портит оформления страницы визуальным редактором. Решение этой проблемы вставить код в function.php:

    function my_formatter($content) { $new_content = ''; $pattern_full = '{(\[raw\].*?\[/raw\])}is'; $pattern_contents = '{\[raw\](.*?)\[/raw\]}is'; $pieces = preg_split($pattern_full, $content, -1, PREG_SPLIT_DELIM_CAPTURE); foreach ($pieces as $piece) { if (preg_match($pattern_contents, $piece, $matches)) { $new_content .= $matches[1]; } else { $new_content .= wptexturize(wpautop($piece)); } }

    С этим кодом и заключенный в [raw] [/raw] блок отображается нормально, но не нажимается.

    http://sovetsovetov.ru/test

    Ответить
    • driver:

      Цитата: «Специально вставил всё с примера...». Всё да не всё))

      Будьте внимательнее, у вас так:.hidek:checked + label и так: .hidek:checked + label + div Найдите, как говориться, отличия с оригиналом.

      Не нашли? Подскажу: имя селектора .hide, а никак не .hidek. Исправьте и всё будет тип-топ.

      Ответить
      • Спасибо большое за оперативность, как говорится слона-то я и не приметил.

        И хоть реклама напрягает, отключил adblock на вашем сайте:)

        Кстати, а не подскажете, на основе чего сделана форма комментариев на вашем сайте? Хорошо выглядит.

        Ответить
  6. Стас:

    Спасибо за статью!

    А не подскажете, как сделать так:

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

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

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

    Ответить
  9. Андрей:

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

    Ответить
    • driver:

      Если вы хотите чтобы все блоки были изначально раскрыты, достаточно каждому тегу <input> прописать атрибут checked, в итоге должно получиться следующее:

      <input type="checkbox" id="hd-1" class="hide" checked/>

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

      См.пример

      Ответить
      • Андрей:

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

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

    Ответить
  11. Сергей:

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

    Ответить
Присоединяйтесь к обсуждению!

Отправляя кoммeнтapий, Вы автоматически принимаете правила кoммeнтиpoвaния на этом блоге.

Правила кoммeнтиpoвaния на блоге Dobrovoimaster:

  1. Во избежание захламления спамом, первый кoммeнтapий всегда проходит премодерацию.
  2. В поле "Ваш сайт" лучше указывать ссылку на главную страницу вашего сайта/блога. Ссылки на прочую веб-лабуду (в том числе блоги/сплоги, созданные не для людей) будут удалены.
  3. Не используйте в качестве имени комментатора слоганы/названия сайтов, рекламные фразы, ключевые и т.п. слова. В случае несоблюдения этого условия, имя изменяю на свое усмотрение. Просьба указывать нормальное имя или ник.
  4. Скорее всего, что не информативный и короткий кoммeнтapий вида "Спасибо!", "Интересная статья", будет удален. Исключение составляют знакомые автору блога комментаторы.
  5. Комментарии не по теме безжалостно удаляются.

Подписаться не комментируя

Обновления комментариев по RSS RSS комментариев к этой записи »
Рейтинг@Mail.ru