Можно ли скрыть и отобразить текст, используя только CSS (без кода JavaScript)? [закрыто]

86

Можно ли отображать и скрывать текст с помощью ссылки только с помощью CSS - вообще без использования JavaScript?

Например: на этой странице

Обратите внимание на ссылку «Еще». Когда вы щелкаете по нему, он показывает текст. Это конкретный пример JavaScript, но я не уверен, что это можно сделать с помощью чистого CSS.

user3188544
источник
2
Другой пример веб-сайта только с CSS (с меню) - grc.com (Стив Гибсон из Security Now ).
Питер Мортенсен
1
Возможные дубликаты: 1 2
user202729
Посмотрите там: Переключить боковую панель только с помощью CSS Есть два образца, один требует щелчка (с использованием скрытого флажка), а другой с использованием наведения )
Ф. Хаури
@ Близкие избиратели: Объясняйтесь.
Boann

Ответы:

107

Есть <details>элемент , который еще не встроен в Edge:

<details>
  <summary>more <!-- a bad summary --></summary>
  <p>Some content</p>
</details>

Я не уверен, насколько сложно согласовывать стили в разных браузерах.

Есть распространенный способ взлома флажков (где флажок можно скрыть, а ярлык можно изменить так, чтобы он выглядел как угодно):

#more:not(:checked) ~ #content {
  display: none;
}
<input id="more" type="checkbox" /> <label for="more">more</label>

<p id="content">Some content</p>

но не всегда (может быть, когда-нибудь? хммм) его использовать; обычно вы можете просто вернуться к отображению контента, когда JavaScript не загружается, и иметь ссылку «еще» на него.

Также есть :target, но это, вероятно, даже менее уместно, так как механизм закрытия сложнее встроить.

#content {
  display: none;
}

#content:target {
  display: block;
}

#less {
  display: none;
}

#content:target ~ #less {
  display: block;
}
<a href="#content" id="more">More</a>
<p id="content">Lorem ipsum</p>
<a href="#" id="less">Less</a>

Ry-
источник
8
Есть отличные законные применения для метода флажков. Рассмотрим форму, подобную этому примеру, который я создал .
misterManSam
7
Озадачены, почему вы так думаете :checkedили :targetникогда не подойдете. В конце концов, они существуют.
Конрад Рудольф
@KonradRudolph Единственное, о чем я могу думать, - это idтребование, которое затрудняет использование динамических страниц. Это не серьезная причина, хотя IMO - этот скрытый шаблон флажка довольно старый, его не сложно понять, и вы можете просто использовать хэш как часть идентификатора в динамических ситуациях.
Izkata
3
@KonradRudolph: никогда не может быть уместным расширять контент с помощью ссылки «больше» . В частности, :targetконтент исчезает, если вы разместите ссылку где-нибудь еще. :checkedозначает, что вы не можете ссылаться внутри расширения, и если вы скроете флажок, вы должны сделать ярлык доступным для клавиатуры. Поскольку для того, чтобы любой из них работал, контент уже должен быть там, я бы просто показал его по умолчанию и использовал JavaScript для обеспечения улучшения в большинстве случаев.
Ry-
@misterManSam: Это не ссылка «больше», это реальная форма.
Ry-
39

Да , это возможно с помощью чистого CSS. Вы можете щелкнуть элемент, используя :checkedатрибут флажка в сочетании с атрибутом <label>элемента for.

Поскольку флажок может быть снят , вы можете использовать это для переключения видимости, просто добавляя visibility: hiddenк элементу , вытекающему из :checked(когда флажок щелкнул снова, это псевдо-селектор будет недействительным, а селектор CSS больше не будет соответствовать целям).

Это может быть расширено до a <label>с использованием forатрибута, чтобы вы могли полностью скрыть сам флажок и применить свой собственный стиль <label>непосредственно к.

Следующее использует смежный родственный комбинатор ( +) для переключения класса toggleпри <label>щелчке по элементу:

input[type="checkbox"] {
  display: none; /* Hide the checkbox */
}

/* This is tied to the invisible checkbox */
label {
    background-color: #4CAF50;
    border: 2px solid black;
    border-radius: 20px;
    color: white;
    padding: 15px 32px;
    text-align: center;
    font-size: 16px;
    display: inline-block;
    margin-bottom: 20px;
    cursor: pointer;
    user-select: none;
}

/* The target element to toggle */
input[type="checkbox"]:checked + label + .toggle {
  visibility: hidden;
}
<input type="checkbox" id="checkbox" />
<label for="checkbox">Click me to toggle the content</label>
<div class="toggle">CONTENT</div>

Обсидиановый век
источник
3
Это то, что позволяет CSS пройти правило 110 и считаться полным по Тьюрингу eli.fox-epste.in/rule110
ESR
17

Да, вы можете легко сделать это, используя только CSS. См. Код ниже:

* {
  box-sizing: border-box;
}

body {
  background-color: #646464;
  color: #fff;
}

header {
  background-color: rgba(0, 0, 0, 0.5);
  font-size: 1.5em;
  text-align: center;
  padding: 1em;
}

.panel-wrapper {
  position: relative;
}

.btn {
  color: #fff;
  background: #000;
  border-radius: 1.5em;
  left: 30%;
  padding: 1em;
  text-decoration: none;
  width: 40%;
}

.show,
.hide {
  position: absolute;
  bottom: -1em;
  z-index: 100;
  text-align: center;
}

.hide {
  display: none;
}

.show:target {
  display: none;
}

.show:target~.hide {
  display: block;
}

.show:target~.panel {
  max-height: 2000px;
}

.show:target~.fade {
  margin-top: 0;
}

.panel {
  position: relative;
  margin: 2em auto;
  width: 70%;
  max-height: 100px;
  overflow: hidden;
  transition: max-height .5s ease;
}

.fade {
  background: linear-gradient(to bottom, rgba(100, 100, 100, 0) 0%, #646464 75%);
  height: 100px;
  margin-top: -100px;
  position: relative;
}
<!DOCTYPE html>
<html lang='en' class=''>

<head>
  <link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
</head>

<body>
  <header>CSS Only: Show More</header>
  <div class="panel-wrapper">
    <a href="#show" class="show btn" id="show">Show Full Article</a>
    <a href="#hide" class="hide btn" id="hide">Hide Full Article</a>
    <div class="panel">
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In pharetra consectetur accumsan. Vestibulum vitae ipsum euismod, tempus ligula non, tempus lacus. Phasellus at pellentesque ex. Praesent at ipsum dui. Cras lectus neque, bibendum ac diam
        a, elementum tristique felis. Sed iaculis, diam at vehicula lacinia, odio urna tincidunt felis, sit amet scelerisque urna erat non leo. Pellentesque vel leo vitae tellus bibendum viverra.</p>
      <p>Donec id ultrices mi. Suspendisse potenti. Pellentesque cursus sagittis lacinia. Mauris elit sem, eleifend nec facilisis eget, fermentum sed odio. Nam aliquam massa nec leo tincidunt rhoncus. Integer tincidunt finibus tincidunt. Maecenas aliquam
        fermentum nisi, vitae mattis neque vehicula vitae.</p>
      <p>Nam orci purus, consequat sed lorem id, lacinia efficitur lorem. Vestibulum id quam ut elit congue varius. Donec justo augue, rhoncus non nisl ut, consectetur consequat velit. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Aliquam
        auctor sapien lorem, at vestibulum justo congue vel. Duis volutpat, lorem quis tincidunt ornare, felis tortor posuere tellus, nec pretium neque velit vulputate libero.</p>
      <p>Morbi tortor tortor, auctor porttitor felis in, eleifend cursus ante. Nullam pellentesque lorem ipsum, in fringilla enim suscipit cursus. Pellentesque feugiat volutpat congue. Donec ac ante elit. Quisque ornare lacus dui, id commodo tortor lacinia
        nec. Curabitur dignissim magna sagittis neque aliquam porttitor. Aenean sit amet tincidunt risus.</p>
      <p>Cras feugiat, sapien luctus congue gravida, enim enim tristique nisl, vel porta lacus ante vitae dolor. Duis at nisl sed lectus imperdiet congue. Vestibulum pellentesque finibus ligula, sit amet elementum enim dignissim eget. Nullam bibendum justo
        eros, in placerat est ullamcorper nec. Donec blandit accumsan venenatis. Vivamus nec elit arcu. Morbi ultrices blandit sapien eget aliquam. Pellentesque placerat et libero a sodales. Donec eget erat ac velit maximus ullamcorper. Nulla laoreet
        dolor in purus sollicitudin varius. Duis eu erat ut magna lobortis rhoncus ac at lacus. Nullam in mi sed sem porttitor molestie. Aenean auctor dui in neque vulputate, in mattis purus tristique. Aliquam egestas venenatis ultricies. Nam elementum
        ante libero, nec dictum erat mollis dapibus. Phasellus pharetra euismod nibh, sit amet lobortis odio.</p>
      <p>Sed bibendum dapibus leo eu facilisis. Cras interdum malesuada diam id lobortis. Phasellus tristique odio eget placerat ornare. Phasellus nisl nulla, auctor convallis turpis tempus, molestie blandit urna. Nullam accumsan tellus massa, at tincidunt
        metus imperdiet sed. Donec sed imperdiet quam, id dignissim dolor. Curabitur mollis ultricies tempor. Morbi porttitor, turpis et dignissim aliquam, nunc lacus dignissim massa, a consequat nibh est vel turpis. Pellentesque blandit, ante vehicula
        sollicitudin imperdiet, tellus urna fringilla diam, id tempor neque augue eu nisl. Quisque eu sem posuere, vehicula risus ut, ullamcorper massa. Fusce vulputate bibendum erat, vel dapibus dui consectetur nec. Donec mauris mauris, egestas non malesuada
        non, finibus nec lacus. Duis at mauris tincidunt, accumsan augue non, vestibulum libero.</p>
      <p>Vestibulum fermentum vulputate lectus, at sollicitudin diam laoreet vitae. Aliquam erat volutpat. Nulla condimentum, arcu nec suscipit ultrices, urna tortor rutrum purus, sed mollis lacus ligula vitae justo. Duis vitae malesuada sem, eget finibus
        nibh. Etiam facilisis, urna ac blandit molestie, quam velit congue nibh, ac.</p>

    </div>
    <!-- end panel -->
    <div class="fade"></div>
  </div>
  <!-- end panel-wrapper -->

</body>

</html>

Акаши
источник
14

Вы можете скрыть флажок, но разрешить / снимать отметку через связанный с ним <label>элемент.

В зависимости от того, установлен ли флажок, вы можете скрыть / показать дополнительный текст и даже изменить текст метки с «Больше» на «Меньше».

Я включил некоторые дополнительные детали в CSS, чтобы намерения каждого определения были немного более ясными.

1. С помощью одной кнопки переключения «Больше» / «Меньше»:

.more-text, #more-checkbox {          /* Hide the second paragraph and checkbox */
  display: none;
}

input:checked ~ .more-text {          /* Show the second paragraph when checked */
  display: block;
}

.more-label::after {                  /* Label underline, hand cursor, color */
  cursor: pointer;
  text-decoration: underline;
  color: #666;
}

input ~ .more-label::after {          /* Set label text to "More" by default */
  content: 'More';
}

input:checked ~ .more-label::after {  /* Set label text to "Less" when checked */
  content: 'Less';
}
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.
</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox"></label>

<p class="more-text">
  Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>


2. С кнопкой «Еще» вверху и «Меньше» внизу:

.more-text, #more-checkbox, .less-label {
  display: none;
}

.more-label, .less-label {          
  cursor: pointer;
  text-decoration: underline; 
  color: #666;
}

input:checked ~ .more-text, input:checked ~ .less-label {
  display: block;
}

input:checked ~ .more-label {
  display: none;
}
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ullamcorper, arcu ut facilisis interdum, lacus felis fringilla nulla, vel scelerisque massa quam vel leo.</p>

<input type="checkbox" id="more-checkbox" />
<label class="more-label" for="more-checkbox">More</label>

<p class="more-text">
  Sed a ullamcorper ex. In elementum purus ullamcorper justo gravida aliquet. Aliquam erat volutpat. Maecenas in ante quam.
</p>

<label class="less-label" for="more-checkbox">Less</label>

Тайлер Ропер
источник
11

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

.hidden-text {
  display: none;
}

.toggle-text:focus + .hidden-text {
  display: block;
}
<p>
  This is an example with no hidden content until you... <a href="#" class="toggle-text">read more</a>!
  <span class="hidden-text">Now I'm visible!!!</span>
</p>

При этом я настоятельно рекомендую вам ознакомиться с JavaScript, поскольку решение с использованием JavaScript для чего-то вроде этого намного проще и обеспечивает дополнительную гибкость.

Адам Чаббак
источник
Это зависит от того, какой браузер фокусирует на ссылке, когда вы нажимаете на нее, чего не требует стандарт (по крайней мере, в прошлый раз, когда я проверял), и что не все браузеры делают (например, это не работает в Safari). Вместо этого, вероятно, было бы лучше использовать: checked или: target.
chridd
10

Да, вы можете сделать это, используя только HTML и CSS.

body { padding: 20px; }

div { margin-top: 10px; border: 1px solid black; width: 200px; height: 100px;
    padding: 5px;
}
input:checked + label + div { display: none; }
input + label:after { content: " To Hide"; }
input:checked + label:after { content: " To Show"; }

label {
    background-color: yellow;
    box-shadow: inset 0 2px 3px rgba(255,255,255,0.2), inset 0 -2px 3px rgba(0,0,0,0.2);
    border-radius: 4px;
    font-size: 16px;
    display: inline-block;
    padding: 2px 5px;
    cursor: pointer;
}
<input type='checkbox' style='display: none' id=cb>
<label for=cb>Click Here</label>
<div>
    Hello. This is some stuff.
</div>

Монир альхуссини
источник
4
Привет, Монир Альхуссини, добро пожаловать в Stack Overflow. Могу я прокомментировать, как улучшить свой ответ? Ваш код работает очень хорошо (по крайней мере, в моем браузере), но с некоторым контекстом он даст лучший ответ; например, вы могли бы объяснить, как и почему это предлагаемое изменение решит проблему, задавшую вопрос, возможно, включая ссылку на соответствующую документацию. Это сделало бы его более полезным для них, а также для других читателей сайта, которые ищут решения схожих проблем.
Винс Боудрен,
3

теперь вы можете скрывать / отображать текст, используя только CSS! Если вы используете ввод текста и хотите отображать / скрывать текст в зависимости от состояния поля ввода, вы можете использовать новый псевдокласс CSS :placeholder-shownдля <input>или <textarea>. Вот пример / демонстрация вышеупомянутого псевдокласса !:

/* Some base style  */
.app {
  margin: 10px auto;
  padding: 10px;
}

code {
  background-color: lightgray;
  padding: 4px;
}

input {
  padding: 5px 10px;
}

input:focus {
  outline: none;
}

/* When there is something in input box give 
  it a solid blue border */

input:not(:placeholder-shown) {
  border: solid 2px #42A5F5
}

/* Hide the p initially */
p {
  background-color: #F0F4C3;
  padding: 5px;
  opacity: 0;
  transition: all 300ms ease-in-out;
}


/* Show the p when the placeholder is not shown. 
  i.e. Something is in the input box and placeholder is gone */
input:not(:placeholder-shown)+p {
  opacity: 1
}
<div class="app">
  <h1>Hide/Show Text using input's <code>:placehoder-shown</code> psuedo class!</h1>
  <label for="name">Enter your name</label>
  <input type="text" id="name" placeholder="Your Name">
  <p class="msg">Well done!</p>
</div>

Вот ссылка на документы MDN.

Это экспериментальная технология. Перед использованием в производственной среде внимательно проверьте таблицу совместимости браузеров.

Hiren
источник
-1

Может быть, кому-то это решение покажется более интуитивным и простым в реализации. Механизм этого заключается в том, что ссылка нацелена на себя, и в этом случае легко выбрать что-либо, что будет дальше в DOM.

.toggle-hide,
.toggle-content {
  display: none;
}
.toggle-show:target + .toggle-hide,
.toggle-show:target + .toggle-hide + .toggle-content {
  display: block;
}
.toggle-show:target {
  display: none;
}
<a id="target" class="toggle-show" href="#target">Show</a>
<a class="toggle-hide" href="#" >Hide</a>
<p class="toggle-content">Lorem ipsum</p>

Mirous
источник
-3

Использовать "display: none;" attribute.

Аджай Мунугала
источник
Привет @Ajay, спасибо за ваш вклад. Однако, похоже, вы ответили только на половину вопроса: вы показали, как это скрыть, но не как показать, и переключаться между двумя состояниями с помощью CSS
Чарли Хардинг
дисплей: блок; откроет это.
Аджай Мунугала
И как вы используете CSS для обработки щелчка, для переключения между состояниями, как задается вопрос?
Чарли Хардинг