Раскрывающиеся блоки с скрытым содержанием с помощью CSS3
В процессе создания сайта или блога и дальнейшего его наполнения содержанием, по разным причинам, порой возникает необходимость скрыть какую-то часть текста, разместить более объёмную информацию в спрятанный до поры до времени блок, но при этом всё же указать пользователю на то, что имеется ещё кое что, и предоставить ему возможность просмотреть скрытое содержание без перехода на следующую строку или страницу.
Раньше для реализации такого решения использовалась груда javascript, теперь же всё это можно очень легко исполнить с помощью удивительных свойств CSS3.
Сегодня мы рассмотрим простейший способ создания на страницах сайта и в отдельных сообщениях, скрытых блоков с содержанием, раскрывающихся при нажатии на определенный элемент текста, используя исключительно свойства CSS3. Переключателем может служить и отдельное слово, и выделенное словосочетание, а так же целое предложение, или информативная иконка.
Такие блоки часто используются на страницах с большим количеством содержания, для того чтобы сделать его более структурированным и компактным, все содержание при этом делится на так называемые группы, в которых на обозрение пользователю представлены только заголовки, весь текст по умолчанию скрыт и увидеть его можно нажав на определенный элемент(см. выше).
Давайте, постараемся обойтись без лишней воды, посмотрите весь этот простейший механизм в действии, на наглядном примере, так же можете и подредактировать что-нибудь при желании:
Пример №1
В роли переключателей раскрывающихся блоков с дополнительной информацией используется никак не выделенный и не обозначенный текст, с недвусмысленным предложением нажать на него, что вы без страха и сомнений обязательно сделайте, чтобы увидеть скрытый текст)))
Как видите всё более-чем прекрасно работает, скрытое содержание, как появляется без проблем, так и исчезает от легкого нажатия мышкой, и при этом мы задействовали самый минимум исполняемого кода, и в html-каркасе, и в формировании стилей css. Без подключения дополнительных javascript библиотек, с извечной тревогой, а не отключены ли они на стороне пользователя.
Реализовать всё это действо, стало возможным благодаря CSS3 псевдоклассу :checked, применяемым к элементам интерфейса, таким как переключатели (checkbox). Что мы собственно и сделали, в теге <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.
Используя скрытые чекбоксы, вы можете легко реализовать вкладки-табы, модальное окно, блоки в стиле аккордеон, слайдеры, галереи и многое другое.
Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:
Проверял на Хроме и IE11, картина одна — все функционирует, но вот досаждает сам чекбокс, который все время на виду (в примере его нет), пытаюсь сообразить какая часть кода за него отвечает…
Проверьте:
.hide {
display: none;
}
.hide {
display: none;
}
Должно быть именно
display: none;и никак иначе, что касаемо данного примера.Здравствуйте!
Есть небольшая проблема, хотелось бы чтоб после открытия первого пункта, при открытии второго, первый — автоматически скрывался. Подскажите, пожалуйста, если это возможно, то какую правку и куда нужно внести.
Здравствуйте, Алёша!
Если не особо вдаваясь в подробности, примерно так: Тынц >>
Набросал на скорую руку, посмотрите и поэкспериментируйте с параметрами,
В хроме не работает… у авторов кстати тоже…
Видимо неправильный у вас хром, всё прекрасно работает и у меня и авторов кстати тоже, пожалуйста не вводите людей в заблуждение, а для начала разберитесь с софтинами, которые пользуете. Повторяю, данный метод обрабатывают все современные и даже не очень современные браузеры… Chrome (его движок) вообще впереди планеты всей в плане поддержки новых стандартов и экспериментальных функций, более того именно под него они и пишутся изначально, а уж потом подхватываются другими движками к исполнению.
Ради интереса проверил на 8 компах… Везде та же картина… Не работает в хроме(и в Яндекс-браузере и Мail.ru соответственно тоже!) Значит что здесь не так… А насчет «неправильного» хрома позвольте заметить, мне кажется у вас неправильный подход, такого типично «упертого программиста». Метод должен работать всегда! У любого пользователя, и у 80-летней бабушки тыкающей в клаву одним пальцем, и у 9-летнего «супер хакера» с неимоверным количеством приложений в браузере. Все остальное приводит к глюченым сайтам. Поучитесь хотя бы на примере популярных соц.сетей.Без обид!! Мне нравится Ваш блог поэтому и комментирую ! Не нравился бы — прошел бы мимо…
Здравствуйте!
Я использовал Ваш пример и он отлично работает в разных браузерах в ОС Windows. Но в ОС Android, в браузерах Chrome и Firefox тоже работает, а вот в штатном браузере, в Opera и других не раскрывается блок . Может быть такая проблема уже известна Вам и есть её решение?
Спасибо!
Здравствуйте!
Спасибо за интерес к теме. Нужно всё же признать, что метод пока ещё довольно сыроват для широкого использования, а с извечной браузерной нестыковкой обработки тех или иных стандартов и вовсе беда. Кроссбраузерного решения у меня на данный момент нет, этот способ скорее эксперимент, некий задел на будущее. Так что наверное пока не стоит воспринимать его как руководство к действию.
Спасибо за ответ!
После обновления в Android некоторых браузеров, этот метод заработал там, но штатный браузер пока не хочет.
Подскажите, возможно ли анимацию прикрутить?
Возможно. Примерно так: Тынц
Добрый день!
Очень прекрасный способ реализовать раскрывающиеся блоки. Спасибо автору.
Но вот незадача, ни в одном браузере в девайсах apple не происходит раскрытия текста, т.е. плюс на минус меняется, но текст не отображается.
Подскажите плз есть ли решение?
Вопрос срочный, заранее благодарю за оперативное решение!
Способ прекрасен, на IE и семействе firefox работает, но вот наткнулся на косяк там где не ждал: в safari. Просто не разворачивается, при этом сам сафарик контент видит. Не могли бы подсказать что можно сделать?
Здравствуйте, Константин.
У меня закралась небольшая ошибка, исправил, сейчас «сафарик» открывает блоки нормально. Пропустил связку между селекторами
label ~ divподскажите пожалуйста как можно сделать так, чтобы текст внутри label менялся вместе с «+» и «-»
Можно попробовать как-то вот так:
codepen.io/NeedHate/pen/EaMevE
очень даже гуд))
Приветствую! Из массы информации касательно раскрывающихся блоков здесь я все же нашла то, что работает =) НО! Первые и второй пример не сработали (смотрела на Хроме).
Использовала посему этот код: jsfiddle.net/driver/a2qtjd4r/
Однако все же…
Плюсик на минус не меняется( и при повторном клике на заголовок блока текст внутри блока не скрывается. А хотелось бы. Очень нужно, чтобы при повторном клике текст скрывался, и чтобы была возможность оставить оба (ну или больше) блока раскрытыми одновременно.
Прошу помощи)
Здравствуйте.
Удивительно, по какой причине у вас именно в Chrome не работает данное решение. Сижу, таращусь в Chrome, клацаю по переключателям, всё прекрасно работает. Тоже самое и с вариантом из комментов.
Ну да ладно, что касаемо вашего вопроса, присмотритесь к решению предложенному выше NeedHate, по моему удачное исполнение, можете только исключить смену текста внутри label при клике, если вам это не нужно.
PS: А для того чтобы при повторном клике блок с текстом скрывался, достаточно в input, атрибут
type="radio"заменить наtype="checkbox"Здравствуйте, а есть решение когда скрытый блок появляется ниже всех пунктов меню, а не под каждым?
У меня на главной должно быть 16 разделов в 3 столбца. При нажатии на раздел должен появляться список подразделов под всеми тремя столбцами.
Спасибо.
как сделать так чтобы плюсик находился в одной строке с самим текстом?
Находите селектор
.hide + label:beforeв нём свойствоmarginи выставляете нужные вам значения, напримерmargin: 0 5px, тем самым уберёте отступы от нижнего и верхнего края, а справа и слева отступ будет5pxсоответственно.Если вам нужно сместить сам плюсик в ту или иную сторону по вертикали, изменяете значения свойства
line-height.Это единственное решение? margin не помогает, в независимости от длины текста и значений margin пишет — в одной строке плюс — ниже текст. пишу с помощью cms, видимо еще какие то свои настройки влияют, но читала все css ничего не нахожу. Что может вилять на это свойство?
Если у вас переключатель выше текста, остаётся проверить выравнивание, должно быть по левому краю
float: left;Здравствуйте. Я попробовала добавить более 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 пункты. Не могу понять что делаю не так…
Извиняюсь, при очередном обновлении, упустил одну очень важную деталь )))
Исправил исходники 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: см. примерИзвините, я пока что новичок в этом деле поэтому пытаюсь разобраться. А что означает content: /2212; ?
Это ничто иное, как знак минус (-) в юникоде
Спасибо за ответ. А почему тогда просто было не написпть «-» или это имеет какое то значение?
Попробовал,правила перестают работать. А почему так происходит?
Добрый день, а можно как-то сделать чтобы список раскрывался вверх от элемента по которому жмут мышкой?
Здравствуйте, спасибо за столь подробный материал. Не могли бы Вы ответить на вопрос — можно ли таким образом сделать «спойлер в спойлере»? Или же лучше будет использовать jQuery? Просто подключать ее только ради этого не очень хочется, все же лишняя нагрузка получается.
Здравствуйте.
Спойлер в спойлере, конечно можно. Вот смотрите, набросал вам парочку примеров:
вариант-1 и вариант-2
Это всего лишь примеры, так что элементы спойлера оформите в соответствии дизайна вашего сайта
Огромное Вам спасибо за ответ! Очень помогли!!!
Добрый день. Хорошая статья — всё написано понятно, но не работает.
Специально вставил всё с примера — блок отображается некорректно, просто чекбокса нет, остальное как-будто не применяется:
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
Цитата: «Специально вставил всё с примера…». Всё да не всё))
Будьте внимательнее, у вас так:
.hidek:checked + labelи так:.hidek:checked + label + divНайдите, как говориться, отличия с оригиналом.Не нашли? Подскажу: имя селектора
.hide, а никак не.hidek. Исправьте и всё будет тип-топ.Спасибо большое за оперативность, как говорится слона-то я и не приметил.
И хоть реклама напрягает, отключил adblock на вашем сайте:)
Кстати, а не подскажете, на основе чего сделана форма комментариев на вашем сайте? Хорошо выглядит.
Спасибо за статью!
А не подскажете, как сделать так:
Нажал на «Нажмите здесь, чтобы открыть» и запись стала: «……Закрыть»
Подскажу)) В своё время, NeedHate предложил интересное решение. Применительно к способу описанному в статье, это будет выглядеть примерно так: тынц >>
Класс!
Спасибо!!!
olimp-nsk.ru Есть такой сайт там два раскрывающихся списка фото, в блоке «готовые» и «на заказ», клавиша «показать еще» раскрывает одновременно сразу у двух этих блоков по три ряда фото,а надо что бы открывало кадая в своем кто может сказать как поравить сей баг?Заранее благодарен за ответы
скажите а как то можно сделать чтобы например вот на этой странице biolaktis.ru/korm-dlya-po…t/biolaktis-lyx/ таблицы — их две, каждая могла так же по клику разворачиваться и сворачиваться, например «Открыть характеристики», и что куда нужно поставить? я имею в виду код. я попробовал по примеру поставил код в файл css шаблона, и html код на страницу а в него shortcod таблицы — но н ичего ен произошло (/ Спасибо.
Как развернуть все блоки?
Если вы хотите чтобы все блоки были изначально раскрыты, достаточно каждому тегу
<input>прописать атрибутchecked, в итоге должно получиться следующее:<input type="checkbox" id="hd-1" class="hide" checked/>Проделав тоже самое с другими чекбоксами скрытых блоков, в итоге на выхлопе получите блоки раскрытые, которые сможете закрывать всё так же по клику.
См.пример
нет, все изначально скрыты и по отдельности работают, а, нажав на отдельную кнопку-ссылку (например «раскрыть все»), нужно чтобы раскрывались-скрывались все одновременно)
Здравствуйте. Создавал свой сайт год назад. Воспользовался вашим способом оформления раскрывающихся блоков (огромное спасибо за это, кстати!), предложенным на этой странице. Год назад все работало замечательно. На своем сайте потом в течение года не заходил на страницы с этими раскрывающимися блоками, не проверял их работоспособность. Сайт на Вордпрессе сделан. За год несколько раз обновлялся. И вот теперь случайно зашел на раздел своего сайта с этими блоками и обнаружил, что они работают некорректно. При нажатии на заголовок чекбокс больше не появляется. Проверил код в Адоб Дримвивер. Там все работает. Подскажите пожалуйста, что проверить в первую очередь? Сам не могу додуматься где ошибка. Заранее благодарю.
Добрый день. Как я могу сделать, чтобы блок раскрывался и закрывался по нажатию на заголовок и одновременно с этим, при нажатии на следующий блок, предыдущий закрывался? Изначально все блоки закрыты
Здравствуйте, Кирил.
Всё довольно просто, необходимо поменять флажки
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), может быть отмечен только один элемент группы, а стало быть закрыть с помощью повторного клика не получится, а только при нажатии следующий кнопки.
Посмотрите пример: Тынц
Спасибо за оперативный ответ. Это я понимаю. Хотелось сделать и то и другое, жаль, что на css нет такой возможности
Очень доходчиво, красиво и по делу
Спасибо!!
Здравствуйте, очень полезная статья, но прошу подскажите, можно ли сделать так, что бы текст раскрывался в бок? Сам думал-думал, но ни к чему не пришел.
Добрый день! Подскажите можно ли в скрытый div вставить ссылку на другую страницу сайта.те Если да, то как? У меня при вставке скрытый div становится видимый. Спасибо.
День добрый.
Валерий, скорее всего вы что-то делаете не так, ссылка вставляется без проблем, посмотрите подготовленный пример, всё пучком, без каких-либо багов.
Спасибо за быстрый ответ! Отдельно работает всё как надо), но как только вставляю в сайт, первый скрытый бокс развернутый(. а остальные все закрытые и вродь даже работают.
Добрый день!Подскажите,можно ли input и label обернуть в div?Если да,то как в таком случае сделать, чтобы отображалось скрытое содержание.
Нажмите здесь, чтобы прочитать больше!.
Скрытое содержание…
Как можно сделать чтобы при переходе по ссылке на эту страницу открывался нужный блок?
Не подскажете, как вставить такой текст на страницу вордпрес?
Вставляю код css в style.css и код html на саму страницу — не выходит.
Благодарю за помощь! применила ваше решение для старенького полурабочего) сайта.
Добрый день, подскажите, можно сделать так, чтобы скрытый блок открывался в другом мечте, т.е. вне этого блока, а допустим в конце странице?