ejemplos - Ocultar Mostrar lista de contenido con solo CSS, no se utiliza javascript
ocultar div html5 (10)
Esto es lo que he usado recientemente.
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/
Espero que ayude en alguna parte.
He estado buscando un buen truco para hacer un contenido de Ocultar / Mostrar o una lista con solo CSS y sin JavaScript. He logrado hacer esta acción:
<!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>
Demostración aquí: http://jsfiddle.net/6W7XD/ Y está funcionando pero no como debería. Aquí está el problema: cuando se muestra el contenido, puede ocultarlo haciendo clic en "en cualquier lugar de la página". ¿Cómo deshabilitar eso? ¿Cómo ocultar el contenido "solo" haciendo clic en ocultar? ¡Gracias de antemano!
Esto va a volar tu mente: botones de radio ocultos .
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>
Y 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;
}
La respuesta a continuación incluye cambiar el texto para "mostrar / ocultar", y utiliza una sola casilla de verificación, dos etiquetas, un total de cuatro líneas de html y cinco líneas de css. También comienza con el contenido oculto.
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;
}
No usaría casillas de verificación, usaría el código que ya tiene
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 esta manera, el texto solo se oculta al hacer clic en el elemento oculto
Primero, gracias a William.
Segundo - Necesitaba una versión dinámica. ¡Y funciona!
Un ejemplo:
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>
Sé que es una publicación antigua, pero ¿qué pasa con esta solución ( he creado un JSFiddle para ilustrarlo ) ... Solución que utiliza :after pseudo elementos de <span> para mostrar / ocultar el enlace del interruptor <span> sí mismo (en Además del mensaje .alert debe mostrar / ocultar). Cuando el seudo elemento pierde su enfoque, el mensaje se oculta.
La situación inicial es un mensaje oculto que aparece cuando <span> con :after content : "Show Me"; esta enfocado. Cuando este <span> está enfocado, es :after content se vacía, mientras que :after content del segundo <span> (que inicialmente estaba vacío) se convierte en "Hide Me" . Entonces, cuando haces clic en este segundo <span> el primero pierde su enfoque y la situación vuelve a su estado inicial.
Comencé con la solución ofrecida por @Vector. Mantuve la presentación de DOM presentada 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;
}
Tengo otra solución 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; }
Fuente: http://css-tricks.com/off-canvas-menu-with-css-target/
Una solución muy fácil de cssportal.com
Si se presiona [show], el texto [show] se ocultará y viceversa.
Este ejemplo no funciona en Chrome, no sé por qué ...
.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>
Utilicé una casilla de verificación oculta para ver persistentemente algún mensaje. La casilla de verificación podría estar oculta (mostrar: ninguna) o no. Este es un pequeño código que podría escribir.
Puedes ver y probar la demo en 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;}
Ejecutar fragmento de código:
#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>
Hay 3 ejemplos rápidos con CSS puro y sin javascript donde el contenido aparece "al hacer clic", con un "clic mantenido" y un tercero "sobre la marcha" (todos solo probados en Chrome). Lo siento por la publicación de esta publicación, pero esta pregunta es el primer resultado de SEO y quizás mi contribución pueda ayudar a un principiante como yo.
Creo (no probado), pero la ventaja del argumento "contenido" es que puedes agregar un gran ícono como de Font Awesome (su / f-Code) o un ícono hexadecimal en lugar del texto "Ocultar" y "Mostrar" para internacionalizar el truco.
enlace de ejemplo 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>