<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
h2 {
margin-bottom:0px;
}
.oculto {
display:none;
}
.info {
padding-left:20px;
margin:0px;
}
</style>
</head>
<body>
<h1>Pulsa sobre una ciudad para ver la información</h1>
<h2>Valencia</h2>
<p class="info oculto">Información de Valencia......</p>
<h2>Madrid</h2>
<p class="info oculto">Información de Madrid......</p>
<h2>Barcelona</h2>
<p class="info oculto">Información de Barcelona......</p>
<h2>Salamanca</h2>
<p class="info oculto">Información de Salamanca......</p>
</body>
</html>
<script>
const mostrar=document.querySelectorAll("h2");
mostrar.forEach(el => {
// creamos el evento click para cada elemento h2
el.addEventListener("click", show);
});
function show(e) {
// ponemos o quitamos la clase "oculto"
this.nextElementSibling.classList.toggle("oculto");
}
</script>
Comentarios sobre la versión: Versión 1.0 (1)