Скрыть Показать список содержимого только с CSS, не используется javascript

Я искал хороший трюк, чтобы сделать контент Hide / Show или список только с CSS и без javascript. Мне удалось сделать это:

   #cont {display: none; } .show:focus + .hide {display: inline; } .show:focus + .hide + #cont {display: block;}    
[Show] / [Hide]
Content

Демо здесь: http://jsfiddle.net/6W7XD/ И это работает, но не так, как должно. Вот проблема: когда содержимое отображается, вы можете скрыть его, нажав «в любом месте страницы». Как отключить это? как скрыть контент «только», нажав кнопку «Скрыть»? Заранее спасибо!

Я бы не использовал флажки, я бы использовал код, который у вас уже есть

DEMO http://jsfiddle.net/6W7XD/1/

CSS

 body { display: block; } .span3:focus ~ .alert { display: none; } .span2:focus ~ .alert { display: block; } .alert{display:none;} 

HTML

 Hide Me Show Me 

Some alarming information here

Таким образом, текст скрывается только щелчком элемента hide

Это сойдет с ума: Скрытые переключатели .

HTML:

     Content 

И CSS:

 input#show, input#hide { display:none; } span#content { display:none; } input#show:checked ~ span#content { display:block; } input#hide:checked ~ span#content { display:none; } 

Существует 3 быстрых примера с чистым CSS и без javascript, где содержимое отображается «на клик», с «поддерживаемым кликом» и третьим «onhover» (все они только протестированы в Chrome). Извините за этот пост, но этот вопрос является первым результатом seo, и, возможно, мой вклад может помочь новичкам вроде меня

Я думаю (не проверен), но преимущество аргумента «контент», что вы можете добавить отличный значок, например, из Font Awesome (его \ f-Code) или шестнадцатеричный значок вместо текста «Скрыть» и «Показать», чтобы интернационализировать трюк.

пример ссылки http://jsfiddle.net/MonkeyTime/h3E9p/2/

      Lorem iupsum dolor si amet  
Ipsum Lorem
Lorem Ipsum
направо Lorem iupsum dolor si amet
Ipsum Lorem
Lorem Ipsum
направо Lorem iupsum dolor si amet
Ipsum Lorem
Lorem Ipsum
направо Lorem iupsum dolor si amet
Ipsum Lorem
Lorem Ipsum

Это то, что я использовал недавно.

CSS

 div#tabs p{display:none;} div#tabs p.tab1:target {display:block;} div#tabs p.tab2:target {display:block;} div#tabs p.tab3:target {display:block;} 

HTML

 

Awesome tab1 stuff

Tab2 stuff

Tab3 stuff

https://jsfiddle.net/hoq0djwc/1/

Надеюсь, что это поможет.

Во-первых, благодаря Уильяму.

Второй – мне нужна динамическая версия. И это работает!

Пример:

CSS:

 p[id^="detailView-"] { display: none; } p[id^="detailView-"]:target { display: block; } 

HTML:

 Show View1 

View1

Show View2

View2

Я использовал скрытый флажок для постоянного просмотра некоторого сообщения. Флажок может быть скрыт (display: none) или нет. Это маленький код, который я мог бы написать.

Вы можете увидеть и протестировать демо на JSFiddle

HTML:

   Do you need some help? 

CSS:

 #show,#content{display:none;} #show:checked~#content{display:block;} 

Выполнить fragment кода:

 #show,#content{display:none;} #show:checked~#content{display:block;} 
   Do you need some help? 

У меня есть еще одно простое решение:

HTML:

 Hide Me Show Me 

Some alarming information here

CSS:

 body { display: block; } p.alert:target { display: none; } 

Источник: http://css-tricks.com/off-canvas-menu-with-css-target/

Очень простое решение от cssportal.com

Если нажать [show], текст [show] будет скрыт и наоборот.

Этот пример не работает в Chrome, я не знаю почему …

 .show { display: none; } .hide:focus + .show { display: inline; } .hide:focus { display: none; } .hide:focus ~ #list { display:none; } @media print { .hide, .show { display: none; } } 
 
[hide] [show]
  1. item 1
  2. item 2
  3. item 3

Я знаю, что это старый пост, но как насчет этого решения ( я сделал JSFiddle, чтобы его проиллюстрировать ) … Решение, которое использует :after псевдоэлементов для отображения / скрытия самой ссылки на коммутатор (в дополнение к сообщению .alert которое должно показать / скрыть). Когда псевдоэлемент теряет фокус, сообщение скрыто.

Исходная ситуация – это скрытое сообщение, которое появляется, когда с :after content : "Show Me"; фокусируется. Когда этот сфокусирован, это :after content становится пустым, а :after content второго (который был изначально пуст) превращается в «Hide Me» . Итак, когда вы нажимаете этот второй первый теряет фокус, и ситуация возвращается в исходное состояние.

Я начал с решения, предлагаемого компанией @Vector. Я сохранил представленную DOM информацию ky @Frederic Kizar

HTML:

   

Some message to show here

CSS:

 body { display: inline-block; } .span3 ~ .span2:after{ content:""; } .span3:focus ~ .alert { display:block; } .span3:focus ~ .span2:after { content:"Hide Me"; } .span3:after { content: "Show Me"; } .span3:focus:after { content: ""; } .alert { display:none; } 

Ответ ниже включает в себя изменение текста для «show / hide» и использует один флажок, две метки, всего четыре строки html и пять строк css. Он также начинается с скрытого содержимого.

Попробуйте в JSFiddle

HTML

    

Hidden Content

CSS

 label { background-color: #ccc; color: brown; padding: 15px; text-decoration: none; font-size: 16px; border: 2px solid brown; border-radius: 5px; display: block; width: 200px; text-align: center; } input, label#hide-button, #hidden-content { display: none; } input#display-toggle:checked ~ label#display-button { display: none; } input#display-toggle:checked ~ label#hide-button { display: block; background-color: #aaa; color: #333 } input#display-toggle:checked ~ #hidden-content { display: block; } 
  • Как найти Список имеет повторяющиеся значения в List
  • Найти наиболее распространенный элемент в списке
  • Почему массивы инвариантны, но списки ковариантны?
  • Удалить дубликаты из списка объектов на основе свойства в Java 8
  • В чем разница между List (of T) и Collection (of T)?
  • Получить определенный элемент в списке или массиве, используя EL
  • mysql проверяет, находятся ли числа в списке, разделенном запятыми
  • Удаление дубликатов из списка в Haskell
  • Коллекция была изменена; операция enums не может выполняться в ArrayList
  • Создание категорий в ListView?
  • Как создать алфавитную полосу прокрутки, отображающую всю букву в android?
  • Давайте будем гением компьютера.