Mostrar/Ocultar Div con un Código Mejorado

GGalizzi dijo:

Te faltaba ponerle display:none al primer hijo (el h2) de .collapse.

Fijate los selectores que estabas usando originalmente:

Insertar CODE, HTML o PHP:

.collapse:focus > * + *

Quiere decir que las especificaciónes que vas a declarar ahora se van a aplicar al hermano, de los hijos directos de .collapse cuando se encuentre en focus. Osea, eso hace que se muestra el <p>

Pero faltaba que se esconda el primer hijo de .collapse (el h2) cuando .collapse esta en focus.

Osea

Insertar CODE, HTML o PHP:

.collapse:focus > h2 {
display: none;
}

O, siguiendo con el uso de wildcards

Insertar CODE, HTML o PHP:

.collapse:focus > * {
display:none;
}

Te dejo como quedaria en el jsbin:
Primero te linkeo sin el uso de wildcards, para que quizas te ayude a entender mejor que esta pasando en el código.
JS Bin - Collaborative JavaScript Debugging

El mismo ejemplo pero con wildcards:
JS Bin - Collaborative JavaScript Debugging

Hacer clic para expandir...

xLincex dijo:

Podrias probarlo asi :

Insertar CODE, HTML o PHP:

<style>
#aparecer{ display:none;}
 .collapse > * + *{
  display:none;
}
.collapse > *{
  cursor:pointer;
}
.collapse:focus{
  outline:none;
}
.collapse:focus > * + *{
  display:block; 
}
</style>

 
<div class="collapse" tabindex="1"> 
<div onclick="document.getElementById('desaparecer').style.display = 'none';document.getElementById('aparecer').style.display = 'block';" id="desaparecer" /><h2 ><a>Mostrar Informacion</a></h2></div>
<p><div id="aparecer">Informacion usuario</div></p>
 </div>

Hacer clic para expandir...

xLincex dijo:

Podrias probarlo asi :

Hacer clic para expandir...

deskpro123 dijo:

Muchas gracias amigo, me podrias explicar lo de Wildcards que no entiendo que viene siendo y a lo mejor me puede servir de mucha ayuda, supongo que son los azteriscos, pero para que sirve?

Hacer clic para expandir...

* {
color: red;
}

.contenedor * {
  background-color: red;
}

.contenedor h3 {
  background-color: red;
}

.collapse > * + *{
  display:none;
}
.collapse > *{
  cursor:pointer;
}
.collapse:focus{
  outline:none;
}
.collapse:focus > * + *{
  display:block; 
}

GGalizzi dijo:

Pero ahí estas usando Javascript, y me parece que deskpro no quiere usar JS.



Si, las wildcards son los asteriscos.

Cuando las usas, el sitio va a aplicar el estilo a todos los elementos que correspondan.

Por ejemplo:

Insertar CODE, HTML o PHP:

* {
color: red;
}

Va a ponerle color rojo a TODOS los elementos.

otro:

Insertar CODE, HTML o PHP:

.contenedor * {
  background-color: red;
}

Va a aplicarle color de fondo rojo a todos los hijos de ".contenedor"
(Hay un espacio entre .contenedor y *, eso es un selector de hijos, osea los hijos de .contenedor)

Mientras algo como

Insertar CODE, HTML o PHP:

.contenedor h3 {
  background-color: red;
}

solo pondria fondo rojo a los hijos h3 de contenedor, usando el wildcard estas diciendo que TODOS los hijos de .contenedor deberían tener las mismas propiedades que ahí definís.

Tu codigo original:

Insertar CODE, HTML o PHP:

.collapse > * + *{
  display:none;
}
.collapse > *{
  cursor:pointer;
}
.collapse:focus{
  outline:none;
}
.collapse:focus > * + *{
  display:block; 
}

La primera declaración se aplica a los hermanos (cualquiera sea el tag de esos hermanos, por el wildcard) de los primeros hijos (cualquiera sea el tag de los hijos, sea h1, h2, h3, p, a, lo que venga) de .collapse.
( ">" es el selector de hijos directos, y "+" es selector de hermanos)

la segunda declaración aplica cursor😛ointer a todos los primeros hijos de .collapse, sea cual sea el tag. Por eso, fíjate en el ejemplo que te deje donde uso wildcards, que "información de usuario" también tiene cursor😛ointer. Porque es un primer hijo de .collapse, si solo queres que el cursor😛ointer se aplique a "mostrar información" tendrias que ser mas especifico en la declaración; osea, en vez de usar un wildcard (*) especifica el tag (en este caso, h2) - Fijate en el ejemplo que te deje sin uso de wildcards, el cursor no esta con puntero cuando lo pones sobre "información de usuario".


¿Entendés?

Cualquier duda pregunta.

Hacer clic para expandir...