Vamos a ver como podemos seleccionar elementos en función de su visibilidad. Podemos elegir los elementos que estén visibles con el comando :visible o los que estén ocultos :hidden.
Selectores :visible y :hidden
<!DOCTYPE html>
<html>
<head>
<title>Selectores de visibilidad</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#miId').click(function(){
$('ul:visible').hide();
});
$('h2').click(function(){
$('ul:hidden').show();
});
});
</script>
<style>
*{
width: 100%;
margin: 0 auto;
}
.oculto{
display:none;
}
</style>
</head>
<body>
<h1 id='miId'>Ocultar las listas visibles</h1>
<ul>
<li class="pr">
Lista 1
</li>
<li>
Lista 2
</li>
<li class="pr">
Lista 3
</li>
<li>
Lista 4
</li>
<li class="pr">
Lista 5
</li>
</ul>
<h2>Visualizar las listas invisibles</h2>
<div></div>
<ul class='oculto'>
<li>
2 Lista 1
</li>
<li class="pr">
Lista 2
</li>
<li class="pr2">
<a href=''>Esto es un enlace con elemento</strong> hijo strong</a>
</li>
<li>
Lista 4
</li>
<li class="pr">
Lista 5
</li>
</ul>
</body>
</html>
Con muy pocas líneas de JQUERY podemos conseguir uno de los efectos más usados, ocultar y mostrar contenido en función de las acciones del usuario con los elementos del HTML. Si pensamos otra forma de hacerlo, sería mucho más complejo.
$('ul:visible').hide();
Oculta (hide) los elementos ul que están visibles. En el ejemplo, al principio hay 1 pero si pinchamos en el segundo enlace habrá 2.
$('ul:hidden').show();
Muestra (show) los ul que están visibles. Y eso es todo.
Deja una respuesta