Mostrar/Ocultar Div com um Código Melhorado

GGalizzi disse:

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

Fijate los selectores que estabas usando originalmente:

Inserir CODE, HTML ou 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

Inserir CODE, HTML ou PHP:

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

O, siguiendo con el uso de wildcards

Inserir CODE, HTML ou 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

Clique para expandir...

xLincex disse:

Podrias probarlo asi :

Inserir CODE, HTML ou 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>

Clique para expandir...

xLincex disse:

Podrias probarlo asi :

Clique para expandir...

deskpro123 disse:

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?

Clique 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 disse:

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:

Inserir CODE, HTML ou PHP:

* {
color: red;
}

Va a ponerle color rojo a TODOS los elementos.

otro:

Inserir CODE, HTML ou 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

Inserir CODE, HTML ou 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:

Inserir CODE, HTML ou 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.

Clique para expandir...