75 lines
4.0 KiB
HTML
75 lines
4.0 KiB
HTML
<!DOCTYPE html>
|
||
<html>
|
||
|
||
<head>
|
||
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
|
||
<title>Ejercicio 01 - DOM b<>sico</title>
|
||
<style>
|
||
.oculto{
|
||
display: none;
|
||
}
|
||
.visible{
|
||
display: block;
|
||
}
|
||
</style>
|
||
</head>
|
||
|
||
<body>
|
||
<p>Lorem ipsum dolor sit amet, <a href="http://prueba">consectetuer adipiscing elit</a>. Sed mattis enim vitae orci.
|
||
Phasellus libero. Maecenas nisl arcu, consequat congue, commodo nec, commodo ultricies, turpis. Quisque sapien
|
||
nunc, posuere vitae, rutrum et, luctus at, pede. Pellentesque massa ante, ornare id, aliquam vitae, ultrices
|
||
porttitor, pede. Nullam sit amet nisl elementum elit convallis malesuada. Phasellus magna sem, semper quis,
|
||
faucibus ut, rhoncus non, mi. <a href="http://prueba2">Fusce porta</a>. Duis pellentesque, felis eu adipiscing
|
||
ullamcorper, odio urna consequat arcu, at posuere ante quam non dolor. Lorem ipsum dolor sit amet, consectetuer
|
||
adipiscing elit. Duis scelerisque. Donec lacus neque, vehicula in, eleifend vitae, venenatis ac, felis. Donec
|
||
arcu. Nam sed tortor nec ipsum aliquam ullamcorper. Duis accumsan metus eu urna. Aenean vitae enim. Integer
|
||
lacus. Vestibulum venenatis erat eu odio. Praesent id metus.</p>
|
||
<p>Aenean at nisl. Maecenas egestas dapibus odio. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices
|
||
posuere cubilia Curae; Proin consequat auctor diam. <a href="http://prueba">Ut bibendum blandit est</a>.
|
||
Curabitur vestibulum. Nunc malesuada porttitor sapien. Aenean a lacus et metus venenatis porta. Suspendisse
|
||
cursus, sem non dapibus tincidunt, lorem magna porttitor felis, id sodales dolor dolor sed urna. Sed rutrum
|
||
nulla vitae tellus. Sed quis eros nec lectus tempor lacinia. Aliquam nec lectus nec neque aliquet dictum. Etiam
|
||
<a href="http://prueba3">consequat sem quis massa</a>. Donec aliquam euismod diam. In magna massa, mattis id,
|
||
pellentesque sit amet, porta sit amet, lectus. Curabitur posuere. Aliquam in elit. Fusce condimentum, arcu in
|
||
scelerisque lobortis, ante arcu scelerisque mi, at cursus mi risus sed tellus.
|
||
</p>
|
||
<p class="parrafo oculto" id="oculto">Donec sagittis, nibh nec ullamcorper tristique, pede velit feugiat massa, at
|
||
sollicitudin justo tellus vitae justo. Vestibulum aliquet, nulla sit amet imperdiet suscipit, nunc erat laoreet
|
||
est, a <a href="http://prueba">aliquam leo odio sed sem</a>. Quisque eget eros vehicula diam euismod tristique.
|
||
Ut dui. Donec in metus sed risus laoreet sollicitudin. Proin et nisi non arcu sodales hendrerit. In sem. Cras id
|
||
augue eu lorem dictum interdum. Donec pretium. Proin <a href="http://prueba4">egestas</a> adipiscing ligula.
|
||
Duis iaculis laoreet turpis. Mauris mollis est sit amet diam. Curabitur hendrerit, eros quis malesuada
|
||
tristique, ipsum odio euismod tortor, a vestibulum nisl mi at odio. <a href="http://prueba5">Sed non lectus non
|
||
est pellentesque</a> auctor. <a href="#" onclick="toogleParrafo()">Ocultar</a> </p>
|
||
|
||
<a class="boton visible" id="enlace" href="#" onclick="toogleParrafo()">Sigue leyendo</a>
|
||
|
||
<script>
|
||
var elemento = document.getElementById('oculto');
|
||
var boton = document.getElementById('enlace');
|
||
|
||
function toogleParrafo() {
|
||
if (elemento.classList.contains('oculto')) {
|
||
mostrar()
|
||
} else {
|
||
ocultar()
|
||
}
|
||
}
|
||
|
||
function mostrar() {
|
||
elemento.classList.add('visible');
|
||
elemento.classList.remove('oculto');
|
||
boton.classList.add('oculto')
|
||
boton.classList.remove('visible')
|
||
}
|
||
function ocultar() {
|
||
elemento.classList.add('oculto');
|
||
elemento.classList.remove('visible');
|
||
boton.classList.add('visible')
|
||
boton.classList.remove('oculto')
|
||
}
|
||
</script>
|
||
|
||
</body>
|
||
|
||
</html> |