Le texte peut-il être masqué et affiché en utilisant uniquement CSS (pas de code JavaScript)? [fermé]

86

Est-il possible d'afficher et de masquer du texte à l'aide d'un lien avec uniquement CSS - sans utiliser du tout JavaScript?

Par exemple: sur cette page

Notez le lien "Plus". Lorsque vous cliquez dessus, il affiche le texte. Cet exemple particulier est JavaScript, mais je ne suis pas sûr que cela puisse être fait avec du CSS pur.

css user3188544
la source
2
Un autre exemple de site Web uniquement CSS (avec menus) est grc.com (Steve Gibson de Security Now ).
Peter Mortensen
1
Doublons
Possible duplication de Hide Show content-list avec seulement CSS, pas de javascript utilisé
jww
Jetez un oeil là-bas: Basculer la barre latérale avec CSS uniquement Il y a deux exemples, l'un nécessitant un clic (en utilisant la case à cocher cachée) et l'autre en utilisant le survol )
F. Hauri
@ Électeurs proches: expliquez-vous.
Boann le

Réponses:

107

Il y a l' <details>élément , qui n'est pas encore intégré à Edge:

<details>
  <summary>more <!-- a bad summary --></summary>
  <p>Some content</p>
</details>
Développer l'extrait

Je ne sais pas à quel point il est difficile de styliser de manière cohérente entre les navigateurs.

Il existe un hack de case à cocher commun (où la case à cocher peut être masquée et l'étiquette peut être stylée pour ressembler à n'importe quoi):

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

<p id="content">Some content</p>
Développer l'extrait

mais ce n'est pas toujours (peut-être jamais? hmm) approprié de l'utiliser; vous pouvez généralement revenir sur l'affichage du contenu lorsque JavaScript ne parvient pas à se charger et avoir le lien «plus» vers celui-ci.

Il y en a aussi :target, mais c'est probablement encore moins approprié, car il est plus difficile d'intégrer le mécanisme de fermeture.

#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>
Développer l'extrait

Ry-
la source
8
Il existe de grandes utilisations légitimes de la méthode des cases à cocher. Prenons un formulaire comme cet exemple que j'ai simulé .
misterManSam
7
Je ne sais pas pourquoi vous pensez :checkedou :targetne serait jamais approprié. Ils existent, après tout.
Konrad Rudolph
@KonradRudolph La seule chose à laquelle je peux penser est l' idexigence, ce qui la rend plus difficile à utiliser pour les pages dynamiques. Pas une bonne raison cependant IMO - ce modèle de case à cocher caché est assez ancien, pas difficile à comprendre, et vous pouvez simplement utiliser un hachage dans le cadre de l'ID dans des situations dynamiques.
Izkata
3
@KonradRudolph: pourrait ne jamais être approprié pour développer le contenu avec un lien «plus» . En particulier :target, le contenu disparaît si vous créez un lien ailleurs. :checkedsignifie que vous ne pouvez pas créer de lien à l'intérieur de l'extension, et si vous masquez la case à cocher, vous devez rendre l'étiquette focalisable au clavier. Étant donné que pour que l'un ou l'autre fonctionne, le contenu doit déjà être présent, je le montrerais simplement par défaut et utiliserais JavaScript pour fournir l'amélioration dans la plupart des cas.
Ry-
@misterManSam: Ce n'est pas un lien «plus», c'est une forme réelle.
Ry-
39

Oui , cela est possible avec du CSS pur. Vous pouvez cliquer sur un élément en utilisant l' :checkedattribut d'une case à cocher en combinaison avec <label>l' forattribut d' un élément .

Comme la case à cocher peut être décochée , vous pouvez l'utiliser pour basculer la visibilité en ajoutant simplement visibility: hiddenà un élément issu de :checked(une fois que la case est à nouveau cochée, ce pseudo-sélecteur sera invalide, et le sélecteur CSS ne correspondra plus à la cible).

Cela peut être étendu à un <label>avec l'utilisation de l' forattribut, afin que vous puissiez complètement masquer la case à cocher elle-même et appliquer votre propre style <label>directement au.

Ce qui suit utilise le combinateur frère adjacent ( +) pour basculer la classe togglelorsque l'utilisateur <label>clique sur l' élément:

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>
Développer l'extrait

Âge d'obsidienne
la source
3
C'est ce qui permet au CSS de passer la règle 110 et d'être considéré comme Turing complet eli.fox-epste.in/rule110
ESR
17

Oui, vous pouvez facilement le faire en utilisant uniquement CSS. Veuillez vous référer au code ci-dessous:

* {
  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>
Développer l'extrait

Akash
la source
14

Vous pouvez masquer une case à cocher, mais lui permettre d'être cochée / décochée via son <label>élément associé .

Selon que la case est cochée ou non, vous pouvez masquer / afficher le texte supplémentaire, et même changer le texte de l'étiquette de "Plus" à "Moins".

J'ai inclus quelques détails supplémentaires dans le CSS afin que les intentions de chaque définition puissent être un peu plus claires.

1. Avec un bouton à bascule "Plus" / "Moins": 

.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>
Développer l'extrait

2. Avec le bouton "Plus" en haut et le bouton "Moins" en bas:

.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>
Développer l'extrait

Tyler Roper
la source
11

Techniquement parlant, il est possible de basculer la visibilité du texte en fonction du moment où vous cliquez sur un bouton ou un lien, comme indiqué ci-dessous:

.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>
Développer l'extrait

Cela étant dit, je vous recommande fortement de vous familiariser avec JavaScript car la solution utilisant JavaScript pour quelque chose comme celui-ci est beaucoup plus simple et permet une flexibilité supplémentaire.

Adam Chubbuck
la source
Cela dépend du navigateur qui concentre le lien lorsque vous cliquez dessus, ce que la norme n'exige pas (au moins la dernière fois que j'ai vérifié), et ce que tous les navigateurs ne font pas (par exemple, cela ne fonctionne pas sur Safari). Utiliser plutôt: vérifié ou: cible serait probablement mieux.
chridd
10

Oui, vous pouvez le faire en utilisant uniquement HTML et 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>
Développer l'extrait

Monir Alhussini
la source
4
Salut monir alhussini, bienvenue dans Stack Overflow. Puis-je faire un commentaire sur la façon d'améliorer votre réponse? Votre code fonctionne très bien (au moins dans mon navigateur), mais avec un peu de contexte, cela ferait une meilleure réponse; par exemple, vous pourriez expliquer comment et pourquoi ce changement proposé résoudrait le problème de l'interrogateur, en incluant peut-être un lien vers la documentation pertinente. Cela le rendrait plus utile pour eux, et aussi plus utile pour les autres lecteurs du site qui recherchent des solutions à des problèmes similaires.
Vince Bowdren
3

maintenant, vous pouvez également masquer / afficher le texte en utilisant uniquement CSS! Si vous utilisez la saisie de texte et que vous souhaitez afficher / masquer du texte en fonction de l'état de la zone de saisie, vous pouvez utiliser la nouvelle pseudo-classe CSS :placeholder-shownpour <input>ou <textarea>. Voici un exemple / démo de la pseudo-classe mentionnée ci-dessus!:

/* 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>
Développer l'extrait

Voici le lien vers les documents MDN.

Il s'agit d'une technologie expérimentale Vérifiez attentivement le tableau de compatibilité du navigateur avant de l'utiliser en production.

Hiren
la source
-1

Peut-être que quelqu'un trouvera cette solution plus intuitive et plus simple à mettre en œuvre. Le mécanisme de ceci est que le lien se cible lui-même et dans ce cas, il est facile de sélectionner tout ce qui vient ensuite dans le 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>
Développer l'extrait

Mirous
la source
-3

Utilisation "display: none;" attribute.

Ajay Munugala
la source
Salut @Ajay, merci pour votre contribution. Cependant, vous semblez n'avoir répondu qu'à la moitié de la question: vous avez montré comment le cacher, mais pas comment le dévoiler, et basculer entre les deux états avec CSS
Charlie Harding
bloc de visualisation; va l'afficher.
Ajay Munugala
Et comment utilisez-vous CSS pour gérer un clic, pour basculer entre les états, comme la question se pose?
Charlie Harding