63 lines
3.2 KiB
HTML
Executable file
63 lines
3.2 KiB
HTML
Executable file
<!DOCTYPE html>
|
|
<html>
|
|
<title>Exercici 03</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
|
|
<head>
|
|
<script>
|
|
window.addEventListener("load", main);
|
|
function main() {
|
|
ass=document.getElementsByTagName("a")
|
|
for(let i=0; i<ass.length; i++) {
|
|
ass[i].addEventListener("click", function(){
|
|
if (ass[i].previousElementSibling.style.display!="none") {
|
|
ass[i].previousElementSibling.style.display="none"
|
|
ass[i].innerHTML="Mostrar"
|
|
} else {
|
|
ass[i].previousElementSibling.style.display="block"
|
|
ass[i].innerHTML="Ocultar contenidos"
|
|
}
|
|
|
|
})
|
|
};
|
|
|
|
}
|
|
|
|
</script>
|
|
</head>
|
|
<body>
|
|
|
|
<div class="w3-container">
|
|
<h1>Exercici 03</h1>
|
|
</div>
|
|
|
|
<div class="w3-container">
|
|
<p id="contenidos_1">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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. 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.</p>
|
|
<a id="enlace_1" href="#">Ocultar contenidos</a>
|
|
<br />
|
|
|
|
<p id="contenidos_2">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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. 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.</p>
|
|
<a id="enlace_2" href="#">Ocultar contenidos</a>
|
|
<br />
|
|
|
|
<p id="contenidos_3">Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 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. 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.</p>
|
|
<a id="enlace_3" href="#">Ocultar contenidos</a>
|
|
</div>
|
|
|
|
</body>
|
|
</html> |