web-dev-qa-db-fra.com

Masquer Afficher la liste de contenus avec uniquement du CSS, aucun javascript utilisé

Je cherchais un bon truc pour créer un contenu Cacher/Montrer ou une liste avec uniquement du CSS et pas de javascript . J'ai réussi à effectuer cette action:

<!DOCTYPE html>
<head>

   <style>
      #cont {display: none; }
      .show:focus + .hide {display: inline; }
      .show:focus + .hide + #cont {display: block;}
   </style>

</head>
<body>

   <div>
        <a href="#show"class="show">[Show]</a>
        <a href="#hide"class="hide">/ [Hide]</a>
        <div id="cont">Content</div>
   </div>

</body>
</html>

Démo ici: http://jsfiddle.net/6W7XD/ .__ Et cela fonctionne mais pas comme il se doit. Voici le problème: Lorsque le contenu est affiché, vous pouvez le masquer en cliquant sur "n’importe où sur la page". Comment désactiver ça? comment masquer le contenu "uniquement" en cliquant sur cacher? Merci d'avance!

csslistcss3hideshow
25
Frederic Kizar

Je n'utiliserais pas les cases à cocher, j'utiliserais le code que vous avez déjà

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

CSS

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

HTML

<span class="span3">Hide Me</span>
<span class="span2">Show Me</span>
<p class="alert" >Some alarming information here</p>

De cette façon, le texte n'est masqué qu'au clic de l'élément masqué

27
Kevin Lynch

Cela va vous étonner: Boutons radio cachés .

HTML:

<label for="show">
    <span>[Show]</span>
</label>
<input type=radio id="show" name="group">
<label for="hide">
    <span>[Hide]</span> 
</label>    
<input type=radio id="hide" name="group">
<span id="content">Content</span>

Et 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;
}
13
Pat Lillis

Il y a 3 exemples rapides avec du CSS pur et sans JavaScript où le contenu apparaît "au clic", avec un "clic maintenu" et un troisième "onhover" (tous testés uniquement dans Chrome). Désolé pour le haut de ce post, mais cette question sont le premier résultat de référencement et peut-être que ma contribution peut aider débutant comme moi

Je pense (non testé) mais l'avantage de l'argument "contenu" que vous pouvez ajouter une grande icône comme de Font Awesome (son code\f) ou une icône hexadécimale à la place du texte "Masquer" et "Afficher "internationaliser le truc.

exemple link http://jsfiddle.net/MonkeyTime/h3E9p/2/

<style>
label { position: absolute; top:0; left:0}

input#show, input#hide {
    display:none;
}

span#content {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    font-size: 0;
    overflow: hidden;
}

input#show:checked ~ .show:before {
    content: ""
}
input#show:checked ~ .hide:before {
    content: "Hide"
}

input#hide:checked ~ .hide:before {
    content: ""
}
input#hide:checked ~ .show:before {
    content: "Show"
}
input#show:checked ~ span#content {
    opacity: 1;
    font-size: 100%;
    height: auto;
}
input#hide:checked ~ span#content {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    font-size: 0;
    overflow: hidden;
}
</style>
<input type="radio" id="show" name="group">   
<input type="radio" id="hide" name="group" checked>
<label for="hide" class="hide"></label>
<label for="show" class="show"></label>
<span id="content">Lorem iupsum dolor si amet</span>


<style>
#show1 { position: absolute; top:20px; left:0}
#content1 {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    font-size: 0;
    overflow: hidden;
}
#show1:before {
    content: "Show"
}
#show1:active.show1:before {
    content: "Hide"
}
#show1:active ~ span#content1 {
    opacity: 1;
    font-size: 100%;
    height: auto;
}
</style>

<div id="show1" class="show1"></div>
<span id="content1">Ipsum Lorem</span>


<style>
#show2 { position: absolute; top:40px; left:0}
#content2 {
    display: block;
    -webkit-transition: opacity 1s ease-out;
    transition: opacity 1s ease-out;
    opacity: 0; 
    height: 0;
    font-size: 0;
    overflow: hidden;
}
#show2:before {
    content: "Show"
}
#show2:hover.show2:before {
    content: "Hide"
}
#show2:hover ~ span#content2 {
    opacity: 1;
    font-size: 100%;
    height: auto;
}

/* extra */
#content, #content1, #content2 {
    float: left;
    margin: 100px auto;
}
</style>

<div id="show2" class="show2"></div>
<span id="content2">Lorem Ipsum</span>
8
MonkeyTime

C'est ce que j'ai utilisé récemment.

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

<div id='tabs'>
  <h2 class="nav-tab-wrapper">
    <a href="#tab1" class="nav-tab tab1">Pages</a>
    <a href="#tab2" class="nav-tab nav-tab-active tab2">Email</a>
    <a href="#tab3" class="nav-tab tab3">Support</a>
  </h2>

  <p id='tab1' class='tab1'>Awesome tab1 stuff</p>
  <p id='tab2' class='tab2'>Tab2 stuff</p>
  <p id='tab3' class='tab3'>Tab3 stuff</p>

</div>

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

J'espère que ça aide quelque part.

4
William

Tout d'abord, merci à William.

Deuxièmement, j'avais besoin d'une version dynamique. Et il fonctionne!

Un exemple:

CSS:

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

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

HTML:

<a href="#detailView-1">Show View1</a>
<p id="detailView-1">View1</p>

<a href="#detailView-2">Show View2</a>
<p id="detailView-2">View2</p>
4
lsblsb

J'ai utilisé une case à cocher masquée pour afficher de manière persistante certains messages. La case à cocher peut être masquée (affichage: aucune) ou non. C'est un petit code que je pourrais écrire.

Vous pouvez voir et tester la démo sur JSFiddle

HTML:

<input type=checkbox id="show">
<label for="show">Help?</label>
<span id="content">Do you need some help?</span>

CSS:

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

Exécuter l'extrait de code:

#show,#content{display:none;}
#show:checked~#content{display:block;}
<input id="show" type=checkbox>
<label for="show">Click for Help</label>
<span  id="content">Do you need some help?</span>

http://jsfiddle.net/9s8scbL7/

4
lynx_74

Je sais que c’est un vieux post, mais qu’en est-il de cette solution ( J’ai créé un JSFiddle pour l’illustrer ) ... Solution qui utilise le pseudo-élément :after de <span> pour afficher/masquer le lien de commutateur <span> au message .alert il doit afficher/masquer). Lorsque le pseudo-élément perd son focus, le message est masqué. 

La situation initiale est un message caché qui apparaît lorsque le <span> avec le :after content : "Show Me"; est activé. Lorsque ce <span> est activé, il devient :after content tandis que le :after content du second <span> (initialement vide) devient "Hide Me". Ainsi, lorsque vous cliquez sur ce deuxième <span>, le premier perd son focus et la situation revient à son état initial.

J'ai commencé avec la solution proposée par @Vector. J'ai gardé la situation présentée dans le DOM. Ky @Frederic Kizar 

HTML:

<span class="span3" tabindex="0"></span>
<span class="span2" tabindex="0"></span>
<p class="alert" >Some message to show here</p>

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;
}
1
Diepen

J'ai une autre solution simple:

HTML:

<a href="#alert" class="span3" tabindex="0">Hide Me</a>
<a href="#" class="span2" tabindex="0">Show Me</a>
<p id="alert" class="alert" >Some alarming information here</p>

CSS:

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

Source: http://css-tricks.com/off-canvas-menu-with-css-target/

1
Miguel Garrido

Une solution très simple de cssportal.com

Si vous appuyez sur [show], le texte [show] sera caché et inversement.

Cet exemple ne fonctionne pas dans Chrome, je ne comprends pas pourquoi ...

.show {
	display: none;
}
.hide:focus + .show {
	display: inline;
}
.hide:focus {
	display: none;
}
.hide:focus ~ #list { display:none; }
@media print {
.hide, .show {
	display: none;
}
}
<div><a class="hide" href="#">[hide]</a> <a class="show" href="#">[show]</a>
<ol id="list">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
</ol>
</div>

1
user2422690

La réponse ci-dessous inclut la modification du texte pour "afficher/masquer" et utilise une seule case à cocher, deux étiquettes, un total de quatre lignes de code HTML et cinq lignes de css. Il commence également avec le contenu caché. 

Essayez-le dans JSFiddle

HTML

<input id="display-toggle" type=checkbox>
<label id="display-button" for="display-toggle"><span>Display Content</span></label>
<label id="hide-button" for="display-toggle"><span>Hide Content</span></label>    
<div id="hidden-content"><br />Hidden Content</div>

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;
}
0
jeffmcneill