Dobrovoi Master
сделано с душой
В состоянии постоянного подключения...

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

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

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

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

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

  • Алишер: 3 марта, 2014 в 20:49

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

    Ответить
    • driver: 4 марта, 2014 в 02:22

      Проверьте:

      .hide {
      display: none;
      }
      .hide {
      display: none;
      }

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

      Ответить
  • Алеша: 19 августа, 2014 в 23:06

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

    Ответить
    • driver: 20 августа, 2014 в 01:25

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

      Ответить
  • ilit70: 17 ноября, 2014 в 16:38

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

    Ответить
    • driver: 18 ноября, 2014 в 00:30

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

      Ответить
      • ilit70: 20 ноября, 2014 в 09:24

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

        Ответить
  • Сеня: 23 ноября, 2014 в 12:01

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

    Ответить
    • driver: 24 ноября, 2014 в 01:01

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

      Ответить
      • Сеня: 24 ноября, 2014 в 13:13

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

        Ответить
  • Мартин: 26 ноября, 2014 в 14:29

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

    Ответить
    • driver: 26 ноября, 2014 в 18:03

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

      Ответить
  • Андрей: 18 февраля, 2015 в 15:42

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

    Ответить
  • Константин: 25 марта, 2015 в 01:11

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

    Ответить
    • driver: 25 марта, 2015 в 06:27

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

      Ответить
  • Артем: 29 марта, 2015 в 19:58

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

    Ответить
    • NeedHate: 30 марта, 2015 в 14:31

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

      Ответить
      • driver: 30 марта, 2015 в 19:52

        очень даже гуд))

        Ответить
  • liosta: 13 июня, 2015 в 21:19

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

    Ответить
    • driver: 13 июня, 2015 в 23:56

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

      Ответить
  • Илья: 4 августа, 2015 в 17:10

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

    Ответить
  • Дарья: 4 октября, 2015 в 19:10

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

    Ответить
  • driver: 4 октября, 2015 в 19:32

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

    Ответить
    • Дарья: 4 октября, 2015 в 20:12

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

      Ответить
      • driver: 4 октября, 2015 в 21:46

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

        Ответить
  • Миа: 6 октября, 2015 в 16:19

    Здравствуйте. Я попробовала добавить более 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: 6 октября, 2015 в 21:35

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

      Ответить
    • Сергей: 17 марта, 2016 в 15:06

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

      Ответить
  • Галина: 9 октября, 2015 в 21:39

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

    Ответить
  • Galina: 25 октября, 2015 в 18:59

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

    Ответить
    • driver: 25 октября, 2015 в 20:01

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

      Ответить
  • Galina: 25 октября, 2015 в 21:48

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

    Ответить
  • Дмитрий: 3 ноября, 2015 в 22:55

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

    Ответить
    • driver: 4 ноября, 2015 в 17:14

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

      Ответить
  • Павел: 12 ноября, 2015 в 13:17

    Спасибо! Пригодилось!

    Ответить
  • Мария: 15 декабря, 2015 в 15:12

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

    Ответить
  • ButtonO: 12 февраля, 2016 в 00:47

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

    Ответить
  • Тимур: 28 марта, 2016 в 17:15

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

    Ответить
    • driver: 28 марта, 2016 в 20:47

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

      Ответить
  • Андрей: 5 апреля, 2016 в 23:29

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

    Ответить
    • driver: 6 апреля, 2016 в 00:03

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

      Ответить
      • Андрей: 6 апреля, 2016 в 01:18

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

        Ответить
  • Роман: 28 апреля, 2016 в 00:23

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

    Ответить
    • driver: 28 апреля, 2016 в 21:45

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

      Ответить
      • Роман: 29 апреля, 2016 в 01:19

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

        Ответить
  • Виталий: 28 апреля, 2016 в 01:14

    Здравствуйте!
    Изменил немного ваш скрипт так как мне нужно чтобы чекбоксы были по умолчанию раскрыты, а закрывались по нажатию. Получилось, что то вроде:
    /* скрываем чекбоксы и блоки с содержанием */
    .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: 28 апреля, 2016 в 22:53

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

      Ответить
  • Дмитрий: 24 июля, 2016 в 18:49

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

    Ответить
    • driver: 24 июля, 2016 в 22:42

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

      Ответить
      • Дмитрий: 25 июля, 2016 в 15:36

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

        Ответить
  • Дмитрий: 26 июля, 2016 в 18:20

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

    Ответить
  • Сергей: 22 августа, 2016 в 20:10

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

    Ответить
  • Руслан: 28 августа, 2016 в 01:40

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

    Ответить
    • driver: 28 августа, 2016 в 19:21

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

      Ответить
      • Руслан: 28 августа, 2016 в 23:57

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

        Ответить
  • Андрей: 12 сентября, 2016 в 17:52

    Добрый день. Хорошая статья — всё написано понятно, но не работает.
    Специально вставил всё с примера — блок отображается некорректно, просто чекбокса нет, остальное как-будто не применяется:
    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] блок отображается нормально, но не нажимается.
    sovetsovetov.ru/test

    Ответить
    • driver: 12 сентября, 2016 в 20:46

      Цитата: «Специально вставил всё с примера…». Всё да не всё))
      Будьте внимательнее, у вас так:.hidek:checked + label и так: .hidek:checked + label + div Найдите, как говориться, отличия с оригиналом.
      Не нашли? Подскажу: имя селектора .hide, а никак не .hidek. Исправьте и всё будет тип-топ.

      Ответить
      • Андрей: 12 сентября, 2016 в 22:00

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

        Ответить
  • Стас: 16 сентября, 2016 в 18:33

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

    Ответить
    • driver: 16 сентября, 2016 в 20:37

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

      Ответить
      • Стас: 17 сентября, 2016 в 14:40

        Класс!
        Спасибо!!!

        Ответить
  • Сергей: 3 октября, 2016 в 09:48

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

    Ответить
  • Евгений: 25 ноября, 2016 в 15:15

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

    Ответить
  • Андрей: 19 декабря, 2016 в 19:36

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

    Ответить
    • driver: 19 декабря, 2016 в 19:47

      Если вы хотите чтобы все блоки были изначально раскрыты, достаточно каждому тегу <input> прописать атрибут checked, в итоге должно получиться следующее:
      <input type="checkbox" id="hd-1" class="hide" checked/>
      Проделав тоже самое с другими чекбоксами скрытых блоков, в итоге на выхлопе получите блоки раскрытые, которые сможете закрывать всё так же по клику.
      См.пример

      Ответить
      • Андрей: 19 декабря, 2016 в 20:57

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

        Ответить
  • Сергей: 28 декабря, 2016 в 19:16

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

    Ответить
  • Кирилл: 2 ноября, 2017 в 16:33

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

    Ответить
    • driver: 2 ноября, 2017 в 18:56

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

      <input class=”hide” id=”hd-1″ name=”h-block” type=”radio”>
      <input class=”hide” id=”hd-2″ name=”h-block” type=”radio”>
      <input class=”hide” id=”hd-1″ name=”h-block” type=”radio”>
      <input class=”hide” id=”hd-2″ name=”h-block” type=”radio”>

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

      Ответить
  • Кирилл: 3 ноября, 2017 в 13:02

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

    Ответить
  • Mr.Davletoff: 9 ноября, 2017 в 14:13

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

    Ответить
  • Сергей: 16 ноября, 2017 в 02:29

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

    Ответить
  • Валерий: 17 мая, 2018 в 14:42

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

    Ответить
    • driver: 17 мая, 2018 в 15:07

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

      Ответить
      • Валерий: 18 мая, 2018 в 00:53

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

        Ответить
  • Oльга: 26 июля, 2018 в 15:08

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

    Ответить
  • Владимир: 26 октября, 2018 в 11:30

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

    Ответить
  • Валентин: 6 ноября, 2018 в 07:12

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

    Ответить
  • Ника: 6 декабря, 2018 в 15:45

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

    Ответить
  • Sasha: 18 июня, 2019 в 13:42

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

    Ответить

Оставить комментарий

Ваш email не будет опубликован.

Вы можете использовать следующие HTML тэги: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>