# Ejercicios
# Ejercicio 1
WARNING
Hacer que 'h1' al hacer click aparesca y desaparesca la etiqueta 'p', tener en cuenta que los 2 son hermanos esta en un mismo contenedor Utilizando Slide Toggle
<section>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, alias.</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem aspernatur voluptates provident at alias eos voluptate ipsum pariatur suscipit laborum. Lorem ipsum .</p>
</section>
<section>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, alias.</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem aspernatur voluptates provident at alias eos voluptate ipsum pariatur suscipit laborum. Lorem ipsum .</p>
</section>
<section>
<h1>Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestiae, alias.</h1>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem aspernatur voluptates provident at alias eos voluptate ipsum pariatur suscipit laborum. Lorem ipsum .</p>
</section>
$(document).ready( function () {
$('p').hide()
//Le damos la opción '.click' a la etiqueta 'h1'
$('h1').click(function(){
// Con 'siblings' seleccionamos a la etiqueta hermana que esta dentro del mismo contenedor 'section'
// Con slideToggle nos da la opcion que al momento de hacer click aparesca y desaparesca la etiqueta 'p' para poder ocultar y mostrarlo
$(this).siblings('p').slideToggle()
})
} )
# Ejercicio 2
WARNING
Hacer que 'h1' al hacer click aparesca y desaparesca la etiqueta 'p', Tener en cuenta que ahora los hermnao son 'h1' & 'article' y lo que tenemos que hacer es ingresar a la etiqueta 'p'
<section>
<h1>Utilizando children</h1>
<article>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem aspernatur voluptates.</p>
</article>
</section>
<section>
<h1>Utilizando children</h1>
<article>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem aspernatur voluptates.</p>
</article>
</section>
<section>
<h1>Utilizando children</h1>
<article>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem aspernatur voluptates.</p>
</article>
</section>
$(document).ready( function () {
//Escondemos la etiqueta 'p'
$('p').hide()
// A la etiqueta 'h1' le damos la opción click
$('h1').click(function(){
// Con siblongs ingresamos al hermano article
// Y con children entramos a su hijo 'p'
$(this).siblings('article').children('p').slideToggle()
})
} )
# Ejercicio 3
WARNING
Hacer que 'h1' al pasar el mause por la etiqueta aparesca y desaparesca la etiqueta 'p', Tener en cuenta que ahora los hermnao son 'h1' & 'article' y lo que tenemos que hacer es ingresar a la etiqueta 'p'
<section>
<h1>Utilizando children</h1>
<article>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem aspernatur voluptates.</p>
</article>
</section>
$(document).ready( function () {
$('p').hide()
$('h1').hover(function(){
$(this).siblings('article').children('p').slideToggle()
})
} )
# Ejercicio 4
WARNING
Hacer que 'h1' al pasar el mause por la etiqueta aparesca y desaparesca la etiqueta 'p', Tener en cuenta que ahora los hermnao son 'h1' & 'article' y lo que tenemos que hacer es ingresar a la etiqueta 'p'. Ahora utilizaremos la opción 'mouseover' & 'mouseout'
<section>
<h1>Utilizando children</h1>
<article>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem aspernatur voluptates.</p>
</article>
</section>
$(document).ready( function () {
// Se esconde la etiqueta p
$('p').hide()
$( 'h1' ) // Seleccionamos la etiqueta 'h1' y ponemos la opcion 'mauseover
.mouseover(function() {
$(this).siblings('article').children('p').slideToggle()
})
.mouseout(function() {
$(this).siblings('article').children('p').slideToggle()
});
} )
# Ejercicio 5
WARNING
Hacer que 'h1' al pasar el mause por la etiqueta aparesca y desaparesca la etiqueta 'p', Tener en cuenta que ahora los hermnao son 'h1' & 'article' y lo que tenemos que hacer es ingresar a la etiqueta 'p'. La etiqueta article ahora se encuentra arriba de h1 para eso utiliza 'parent()'. Ahora utilizaremos la opción 'mouseover' & 'mouseout'
<section>
<article>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Rem aspernatur voluptates.</p>
</article>
<span>
<h1>Utilizando parent</h1>
</span>
</section>
$(document).ready( function () {
$('p').hide()
$( 'h1' )
.mouseover(function() {
// Con parent() retrocedemos a la etiqueta article que esta arriba de ella
$(this).parent().siblings('article').children(' p').slideToggle() // Con children ingresamos al hijo de article que es 'p'
})
.mouseout(function() {
$(this).parent().siblings('article').children(' p').slideToggle()
});
} )
# Escondiendo objetos utilizando 'overlay()'
# Ejercicio 6
WARNING
Colocar una imagen y al momento de hacer click muestre un fondo negro con texto al medio y a la ves si se realiza un click en la otra imagen se cierre el que esta abierto
<div class="content">
<article>
<div class="overlay">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, laudantium?</p>
</div>
<img src="https://www.latercera.com/resizer/Am6Tr2ws8JnL4CHLfU_Humpr56Q=/900x600/smart/arc-anglerfish-arc2-prod-copesa.s3.amazonaws.com/public/XMJRWZH5N5CBXPL67NAKBGXFNI.jpg" alt="">
</article>
<article>
<div class="overlay">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quae, laudantium?</p>
</div>
<img src="https://www.latercera.com/resizer/Am6Tr2ws8JnL4CHLfU_Humpr56Q=/900x600/smart/arc-anglerfish-arc2-prod-copesa.s3.amazonaws.com/public/XMJRWZH5N5CBXPL67NAKBGXFNI.jpg" alt="">
</article>
</div>
$(document).ready( function () {
// Escondemos el div con la clase Overlay que dentro contiene al parrafo
$('.overlay').hide()
$('article').click(function() {
// El método que permite obtener una lista de los elementos hermanos del seleccionado
$(this).siblings('article').children('.overlay').slideUp(1000)
// método devuelve todos los hijos directos del elemento seleccionado.
$(this).children('.overlay').slideToggle(1000)
} )
})
*{
margin: 0;
padding: 0;
}
img{
width: 100%;
}
.content{
display: flex;
}
article{
position: relative;
}
.overlay{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
background-color: rgba(0, 0, 0, 0.381);
}
p{
position: absolute;
width: 100%;
bottom: 38%;
left: 3%;
display: inline-table;
align-items: center;
justify-content: center;
}
@media (max-width: 600px) {
.content{
display: flex;
flex-wrap: wrap;
}
}