estoy intentando crear una pagina con HTML, en la cual en determinada sección, al presionar un botón aparezca una imagen y que, al tocarlo por segunda vez, esta desaparezca nuevamente. El problema es que necesito 3 de dichos botones e intenté definir una función con 2 parámetros para poder "reciclarla" en cada uno de ellos. La primer parte de la función responde bien, pero al realizar el segundo click, no hay cambio alguno. Entiendo que problema viene con el segundo parámetro, ya que cundo lo elimino y creo un "contador" único para los 3 botones, la función corre como debería, aunque no es del todo funcional, ya que se debe hacer un clic extra por botón al cambiar de uno a otro. Quisiera saber si hay algún modo de que esto funcione o, en todo caso, que debería plantear realmente para que funcione. (Disculpen si es un error muy básico, es el primer HTML que creo y JS lo he usado, pero para funciones pequeñas y sin sentido en un curso online hace ya bastante tiempo)
Código HTML
<ul>
<li>
<button id="colegio" onclick="desplegar (fcolegio, contadora)">Escuela Secundaria Springfield.</button>
<div class= "fcolegio"></div>
</li>
<li>
<button id="uni" onclick="desplegar (funi, contadorb)">Escuela Tecnológica Springfield.</button>
<div class= "funi"></div>
</li>
<li>
<button id="payasos" onclick="desplegar (fpayasos, contadorc)">Escuela de Payasos Krusty.</button>
<div class= "fpayasos"></div>
</li>
</ul>
Código CSS
.fcolegio {
width: 0px;
height: 0px;
}
.funi {
width: 0px;
height: 0px;
}
.fpayasos {
width: 0px;
height: 0px;
}
.fcolegio.foto{
width: 512px;
height: 280px;
background-image: url(Img/Homero\ Adolescente.png);
grid-column: 1/3;
margin: 15px;
}
.funi.foto{
width: 512px;
height: 280px;
background-image: url(img/Homero\ Universitario.jpg);
background-size: cover;
grid-column: 1/3;
margin: 15px;
}
.fpayasos.foto{
width: 512px;
height: 527px;
background-image: url(img/Homero\ payaso.jpg);
background-size: cover;
grid-column: 1/3;
margin: 15px;
}
Código JS
var colegio = document.getElementById ('colegio');
var universidad = document.getElementById ('uni');
var payasos = document.getElementById ('payasos');
var fcolegio = document.querySelector ('.fcolegio');
var funi = document.querySelector ('.funi');
var fpayasos = document.querySelector('.fpayasos');
contadora=0;
contadorb=0;
contadorc=0;
function desplegar (objeto, contenedor) {
if (contenedor===0){
contenedor=1;
objeto.classList.add('foto');}
else{
contenedor=0;
objeto.classList.remove('foto');}
}