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

    Ответить
    • driver:

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

      Ответить
      • Ради интереса проверил на 8 компах... Везде та же картина... Не работает в хроме(и в Яндекс-браузере и Мail.ru соответственно тоже!) Значит что здесь не так... А насчет «неправильного» хрома позвольте заметить, мне кажется у вас неправильный подход, такого типично «упертого программиста». Метод должен работать всегда! У любого пользователя, и у 80-летней бабушки тыкающей в клаву одним пальцем, и у 9-летнего «супер хакера» с неимоверным количеством приложений в браузере. Все остальное приводит к глюченым сайтам. Поучитесь хотя бы на примере популярных соц.сетей.Без обид!! Мне нравится Ваш блог поэтому и комментирую ! Не нравился бы — прошел бы мимо...

        Ответить
        • driver:

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

          Как вам доказать, что всё работает, уже и не представляю. Вот прямо сейчас, пишу ответ и перед глазами, на трёх машинах запущен Chrome c демонстрацией примера, один на «локале» в отдельной, специально, наскоро сделанной html-странице, один у меня на блоге и ещё один в редакторе JSFiddle, везде результат работы данного метода положительный. Прям мистика какая-то.

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

          А пока, работаю над «аккордеоном» на основе этого метода, получается, вполне кроссбраузерный механизм(по крайней мере у меня), так что обязательно заходите, проверить результат.

  2. Сеня:

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

    Я использовал Ваш пример и он отлично работает в разных браузерах в ОС Windows. Но в ОС Android, в браузерах Chrome и Firefox тоже работает, а вот в штатном браузере, в Opera и других не раскрывается блок . Может быть такая проблема уже известна Вам и есть её решение?

    Спасибо!

    Ответить
    • driver:

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

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

      Ответить
      • Сеня:

        Спасибо за ответ!

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

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

    Ответить
    • driver:

      Проверьте:

      .hide {
        display: none;
      }

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

      Ответить
  4. Алеша:

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

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

    Ответить
    • driver:

      Здравствуйте, Алёша!

      Если не особо вдаваясь в подробности, примерно так: Тынц >>

      Набросал на скорую руку, посмотрите и поэкспериментируйте с параметрами,

      Ответить
  5. Мартин:

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

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

    Добрый день!

    Очень прекрасный способ реализовать раскрывающиеся блоки. Спасибо автору.

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

    Подскажите плз есть ли решение?

    Вопрос срочный, заранее благодарю за оперативное решение!

    Ответить
  7. Константин:

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

    Ответить
    • driver:

      Здравствуйте, Константин.

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

      Ответить
  8. Артем:

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

    Ответить
  9. liosta:

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

    Использовала посему этот код: jsfiddle.net/driver/a2qtjd4r/

    Однако все же...

    Плюсик на минус не меняется( и при повторном клике на заголовок блока текст внутри блока не скрывается. А хотелось бы. Очень нужно, чтобы при повторном клике текст скрывался, и чтобы была возможность оставить оба (ну или больше) блока раскрытыми одновременно.

    Прошу помощи)

    Ответить
    • driver:

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

      Удивительно, по какой причине у вас именно в Chrome не работает данное решение. Сижу, таращусь в Chrome, клацаю по переключателям, всё прекрасно работает. Тоже самое и с вариантом из комментов.

      Ну да ладно, что касаемо вашего вопроса, присмотритесь к решению предложенному выше NeedHate, по моему удачное исполнение, можете только исключить смену текста внутри label при клике, если вам это не нужно.

      PS: А для того чтобы при повторном клике блок с текстом скрывался, достаточно в input, атрибут type="radio" заменить на type="checkbox"

      Ответить
  10. Илья:

    Здравствуйте, а есть решение когда скрытый блок появляется ниже всех пунктов меню, а не под каждым?

    У меня на главной должно быть 16 разделов в 3 столбца. При нажатии на раздел должен появляться список подразделов под всеми тремя столбцами.

    Спасибо.

    Ответить
  11. Дарья:

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

    Ответить
  12. driver:

    Находите селектор .hide + label:before в нём свойство margin и выставляете нужные вам значения, например margin: 0 5px, тем самым уберёте отступы от нижнего и верхнего края, а справа и слева отступ будет 5px соответственно.

    Если вам нужно сместить сам плюсик в ту или иную сторону по вертикали, изменяете значения свойства line-height.

    Ответить
    • Дарья:

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

      Ответить
      • driver:

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

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

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