Главная » Уроки » Раскрывающиеся блоки с скрытым содержанием с помощью 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.

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

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

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

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

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

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

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

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

    Ответить
    • driver:

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

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

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

      Ответить
  2. Галина:

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

    Ответить
  3. Galina:

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

    Ответить
    • driver:

      Демо из статьи у вас в браузере работает сразу? Всё путное видите без обновления страницы?

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

      Ответить
  4. Galina:

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

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

    Ответить
  6. Спасибо! Пригодилось!

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

    Ответить
  8. ButtonO:

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

    Ответить
  9. Тимур:

    Добрый день!

    Все получилось, всё работает.

    А что нужно добавить, что-бы внизу раскрывшийся статьи тоже выводилось : Свернуть статью , что бы не приходилось листать вверх что-бы её свернуть?

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

    Можно ли таким образом скрыть не просто текст, а готовую галерею с кучей фоток?

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

    Ответить
    • driver:

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

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

        Спасибо за оперативный ответ и шикарный сайт!

        Буду пытаться воплотить в жизнь задуманное.

        Ответить
  11. Роман:

    Уважаемый автор, подскажи, ОООчень нужно! Как сделать такое на css?

    Пример:

    ----------

    Когда я вернулся в комнату, кирпичики и соляные пирамидки были уже переложены на подоконник и Николай крылышком сметал песок с

    Развернуть/свернуть текст >>

    ----------

    При нажатии разворачивается текст, при повторном нажатии сворачивается.

    Не нужно никаких рамочек, украшений, переходов и прочих наворотов.

    Чисто текст, без эффектов.

    Ссылка всегда находиться внизу, под текстом.

    Перерыл весь инет, но все решения только на java-скриптах, что не радует.

    Нужен только css.

    Пытался на твоем примере сделать, но ссылка вниз не ставиться.

    Выручайте, зашел в тупик))

    Благодарствую заранее!!

    Ответить
  12. Виталий:

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

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

    /* скрываем чекбоксы и блоки с содержанием */

    .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;

    }

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

    Подскажите, что здесь не так?

    Ответить
    • driver:

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

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

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

Отправляя к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