¿Se puede ocultar y mostrar el texto usando solo CSS (sin código JavaScript)? [cerrado]

86

¿Es posible mostrar y ocultar texto usando un enlace solo con CSS, sin usar JavaScript en absoluto?

Por ejemplo: en esta página

Tenga en cuenta el enlace "Más". Cuando hace clic en él, muestra el texto. Este ejemplo en particular es JavaScript, pero no estoy seguro de si se puede hacer con CSS puro.

css usuario3188544
fuente
2
Otro ejemplo de un sitio web de solo CSS (con menús) es grc.com (Steve Gibson de Security Now ).
Peter Mortensen
1
Posibles duplicados: 1 2
user202729
Posible duplicado de Ocultar Mostrar lista de contenido con solo CSS, sin javascript utilizado
jww
Eche un vistazo allí: Alternar barra lateral solo con CSS Hay dos muestras, una que requiere un clic (usando la casilla de verificación oculta) y otra usando el cursor )
F.Hauri
@ Votantes cercanos: Explíquense.
Boann

Respuestas:

107

Está el <details>elemento , que aún no está integrado en Edge:

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

No estoy seguro de lo difícil que es diseñar un estilo uniforme en todos los navegadores.

Hay un truco de casilla de verificación común (donde la casilla de verificación se puede ocultar y la etiqueta se puede diseñar para que se parezca a cualquier cosa):

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

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

pero no siempre es apropiado (¿quizás nunca? hmm) usarlo; Por lo general, puede recurrir a mostrar el contenido cuando JavaScript no se carga y tener el enlace "más".

También hay :target, pero probablemente sea incluso menos apropiado, ya que es más difícil de construir en el mecanismo de cierre.

#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>
Expandir fragmento

Ry-
fuente
8
Existen excelentes usos legítimos para el método de casilla de verificación. Considere una forma como este ejemplo que simulé .
misterManSam
7
Desconcertado por qué piensa :checkedo :targetnunca sería apropiado. Existen, después de todo.
Konrad Rudolph
@KonradRudolph Lo único que se me ocurre es el idrequisito, lo que dificulta su uso para páginas dinámicas. En mi opinión, no es una buena razón: este patrón de casilla de verificación oculto es bastante antiguo, no es difícil de entender, y puede usar un hash como parte de la identificación en situaciones dinámicas.
Izkata
3
@KonradRudolph: puede que nunca sea apropiado expandir el contenido con un enlace "más" . En particular :target, el contenido desaparece si lo vincula en cualquier otro lugar. :checkedsignifica que no puede vincular dentro de la expansión, y si oculta la casilla de verificación, debe hacer que la etiqueta se pueda enfocar con el teclado. Dado que para que cualquiera de estos funcione, el contenido ya tiene que estar allí, simplemente lo mostraría de forma predeterminada y usaría JavaScript para proporcionar la mejora en la mayoría de los casos.
Ry-
@misterManSam: Ese no es un enlace "más", es una forma real.
Ry-
39

Sí , esto es posible con CSS puro. Puede hacer clic en un elemento haciendo uso del :checkedatributo de una casilla de verificación en combinación con <label>el foratributo de un elemento .

Debido a que la casilla de verificación se puede desmarcar , puede usar esto para alternar la visibilidad simplemente agregando visibility: hiddenun elemento proveniente de :checked(una vez que se hace clic en la casilla de verificación nuevamente, este pseudo-selector no será válido y el selector de CSS ya no coincidirá con el objetivo).

Esto se puede extender a una <label>con el uso del foratributo, de modo que pueda ocultar completamente la casilla de verificación y aplicar su propio estilo <label>directamente.

Lo siguiente hace uso del combinador hermano adyacente ( +) para alternar la clase togglecuando <label>se hace clic en el elemento:

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>
Expandir fragmento

Edad de obsidiana
fuente
3
Esto es lo que permite que CSS pase la regla 110 y se considere Turing completo eli.fox-epste.in/rule110
ESR
17

Sí, puede hacer esto fácilmente usando solo CSS. Consulte el código siguiente:

* {
  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>
Expandir fragmento

Akash
fuente
14

Puede ocultar una casilla de verificación, pero permitir que se marque / desmarque a través de su <label>elemento asociado .

En función de si la casilla de verificación está marcada o no, puede ocultar / mostrar el texto adicional e incluso cambiar el texto de la etiqueta de "Más" a "Menos".

He incluido algunos detalles adicionales en el CSS para que las intenciones de cada definición puedan ser un poco más claras.

1. Con un botón de alternar "Más" / "Menos": 

.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>
Expandir fragmento

2. Con el botón "Más" en la parte superior y el botón "Menos" en la parte inferior:

.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>
Expandir fragmento

Tyler Roper
fuente
11

Técnicamente hablando, es posible alternar la visibilidad del texto en función de cuándo hace clic en un botón o enlace, como se muestra a continuación:

.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>
Expandir fragmento

Dicho esto, le recomiendo encarecidamente que se familiarice con JavaScript, ya que la solución que usa JavaScript para algo como esto es mucho más simple y permite una flexibilidad adicional.

Adam Chubbuck
fuente
Esto depende de que el navegador enfoque el enlace cuando hace clic en él, lo que el estándar no requiere (al menos la última vez que lo verifiqué) y que no todos los navegadores hacen (por ejemplo, esto no funciona en Safari). Usar: comprobado o: objetivo en su lugar probablemente sería mejor.
chridd
10

Sí, puede hacerlo utilizando solo HTML y 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>
Expandir fragmento

Monir alhussini
fuente
4
Hola monir alhussini, bienvenido a Stack Overflow. ¿Puedo hacer un comentario sobre cómo mejorar su respuesta? Su código funciona muy bien (al menos en mi navegador), pero con algo de contexto sería una mejor respuesta; por ejemplo, podría explicar cómo y por qué este cambio propuesto resolvería el problema del interlocutor, quizás incluyendo un enlace a la documentación relevante. Eso lo haría más útil para ellos, y también más útil para otros lectores del sitio que buscan soluciones a problemas similares.
Vince Bowdren
3

¡ahora también puede ocultar / mostrar texto usando solo CSS! Si está utilizando la entrada de texto y desea mostrar / ocultar texto según el estado del cuadro de entrada, puede utilizar la nueva pseudoclase CSS :placeholder-shownpara <input>o <textarea>. Aquí hay un ejemplo / demostración de la pseudoclase mencionada anteriormente:

/* 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>
Expandir fragmento

Aquí está el enlace a MDN Docs.

Esta es una tecnología experimental. Verifique cuidadosamente la tabla de compatibilidad del navegador antes de usarla en producción.

Hiren
fuente
-1

Quizás alguien encuentre esta solución más intuitiva y más fácil de implementar. La mecánica de esto es que el enlace se dirige a sí mismo y, en ese caso, es fácil seleccionar cualquier cosa que venga a continuación en el 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>
Expandir fragmento

Mirous
fuente
-3

Utilizar "display: none;" attribute.

Ajay Munugala
fuente
Hola @Ajay, gracias por tu contribución. Sin embargo, parece que solo ha respondido la mitad de la pregunta: ha mostrado cómo ocultarlo, pero no cómo mostrarlo, y cambiar entre los dos estados con CSS
Charlie Harding
bloqueo de pantalla; lo mostrará.
Ajay Munugala
¿Y cómo se usa CSS para manejar un clic, para cambiar entre los estados, como pregunta la pregunta?
Charlie Harding