ROMACODE

# 2.- Día 2

# Escondiendo objetos utilizando '.hide()'

            <section>
                <h1>H1 en section</h1>
                <article>
                    <p>Lorem, ipsum dolor.</p>
                    <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</span>
                </article>
            </section>

                $('h1').click( () => {
                    //Dentro de hide estan los milesegundos que se va a demorar en esconder
                    $('p').hide(1000);
                })

# Escondiendo objetos utilizando '.hide() .show()'

            <section>
                <h1>H1 en section</h1>
                <article>
                    <p>Lorem, ipsum dolor.</p>
                    <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</span>
                </article>
            </section>

                // Escondemos etiqueta 'p'
                    $("p").hide();

                    $('h1').click( () => {
                        // Hacemos aparecer la etiqueta 'p'
                        $('p').show(1000);
                        // Hacemos desaparecer la etiqueta 'span'
                        $('span').hide(1000);
                    })

# Ejercicio 1'

WARNING

.Parrafo oculto, al hacer click al h1 el parrafo se muestra en 4segundos, cuando al span le hago click el parrafo se esconde imediatamente

            <section>
                <h1>H1 en section</h1>
                <article>
                    <p>Lorem, ipsum dolor.</p>
                    <span>Lorem ipsum dolor, sit amet consectetur adipisicing elit.</span>
                </article>
            </section>

                //parrafo oculto
                $("p").hide();

                $('h1').click( () => {
                    //al hacer click al h1 el parrafo se muestra en 4segundos 
                    $('p').show(1000);

                    // cuando al span le hago click el parrafo se esconde imediatamente
                    $('span').click( () => {
                        //Escondiendo a la etiqueta parrafo haciendo click en el span
                        $('p').hide(1000);
                    } )
                })

# Otras opciones

Opción 1

            //parrafo oculto
            $("p").hide();

            $('h1').click( () => {
                //al hacer click al h1 el parrafo se muestra en 4segundos 
                $('p').show(4000);
                // cuando al span le hago click el parrafo se esconde imediatamente
                $('span').click( () => {
                    //Escondiendo a la etiqueta parrafo haciendo click en el span
                    $('p').hide(4000);
                } )
            })

Opción 2

            //parrafo oculto
            $("p").css("display", "none");

            $('h1').click( () => {
                //al hacer click al h1 el parrafo se muestra en 4segundos 
                $("p").css("display", "block");
                // cuando al span le hago click el parrafo se esconde imediatamente
                $('span').click( () => {
                    //Escondiendo a la etiqueta parrafo haciendo click en el span
                    $("p").css("display", "none");
                } )
            })

# Ejercicio 2'

WARNING

.Haciendo varias veces click a la etiqueta 'h1' aparecer y desaparecer a la ves la etiqueta 'p'

            //Esconder y aparecer objetos
            $('h1').click( () => {
                $('p').toggle(500);
            })

# Ejercicio 3'

WARNING

.Haciendo click al 'h1' lleve a la imagen haciendolo por rutas

            $('section>h1').click( () => {
                $('article>img').toggle(1000);
            })

# Ejercicio 4'

WARNING

.Haciendo click al 'h1' lleve a la imagen haciendolo esconder llegando por rutas

            <section>
                <h1>H1 en section</h1>
                <article>
                    <p>Esto es el parrafo. h1</p>
                    <span>ESTA ES LA ETIQUETA SPAN</span>
                    <img src="https://regionps.com/wp-content/uploads/2020/01/ultra-instinto.jpg" alt="">
                </article>
            </section>

            $('h1').click( () => {
                // 'Sibling ' se ultiliza para encontrar al hermano que es article
                // 'children' se utiliza para selecionar al hijo que tiene el padre
                $('h1').siblings('article').children('img').hide(300)
            })

# Ejercicio 5'

WARNING

Al hacer click en los h1 de cada seccion que esconda su propia imagen

            <section>
                <h1 id="one">H1 en section</h1>
                <article>
                    <p>Esto es el parrafo. h1</p>
                    <span>ESTA ES LA ETIQUETA SPAN</span>
                    <img src="https://regionps.com/wp-content/uploads/2020/01/ultra-instinto.jpg" alt="">
                </article>
            </section>

            <section>
                <h1 id="two">H2 en section</h1>
                <article>
                    <p>Esto es el parrafo. h2</p>
                    <span>ESTA ES LA ETIQUETA SPAN</span>
                    <img src="https://regionps.com/wp-content/uploads/2020/01/ultra-instinto.jpg" alt="">
                </article>
            </section>

            <section>
                <h1 id="three">H3 en section</h1>
                <article>
                    <p>Esto es el parrafo. h3</p>
                    <span>ESTA ES LA ETIQUETA SPAN</span>
                    <img src="https://regionps.com/wp-content/uploads/2020/01/ultra-instinto.jpg" alt="">
                </article>
            </section>

            $('#one').click( () => {
                $('#one').siblings('article').children('img').toggle(300)
            })

            $('#two').click( () => {
                $('#two').siblings('article').children('img').toggle(300)
            })
            $('#three').click( () => {
                $('#three').siblings('article').children('img').toggle(300)
            })

# Ejercicio 6'

WARNING

Cada ves al hacer click en una imagen el parrafo de su sección si esta escondido se muestre y si se muestra que se esconda

            $('h1').click( function() {
                $(this).siblings('article').children('img').toggle(300)
            })

            $('img').click( function() {
                $(this).siblings('p').toggle(300)
            })

# Ejercicio 7'

WARNING

Al hacer click en una imagen el parrafo correspondiente se oculte o se muestre alternativamente sin que se abran huecos

            <nav>
                <div>
                    <ul>
                        <li>Inicio</li>
                        <li>Nosotros</li>
                        <li>Blog</li>
                        <li>Contact</li>
                    </ul>
                    <div>
                        <span class="icon-cross"></span>
                        <span class="icon-menu"></span>
                    </div>
                </div>
            </nav>
```


```js
            $(document).ready( function() {

                $('.icon-cross').hide()
                
                $('.icon-menu').click( function () {
                    $('.icon-cross').toggle(9);
                    $('.icon-menu').hide(9)
                    $('ul').show()
                })
                $('.icon-cross').click( function () {
                    $('.icon-menu').toggle(9);
                    $('.icon-cross').hide(9)
                    $('ul').hide()
                })
            });
```

← 3.- Día 3 →