Javascript: funzione che richiami la visibilità nei css

[Maverick01]

Ciao a tutti, sono nuovo del forum. Vi chiedo cortesemente se potete aiutarmi in questa cosa che vorrei realizzare con javascript. Quello che mi serve è scrivere una funzione in cui, quando clicco su un pulsante, si apra un piccolo riquadro sovrastante o sottostante. La cosa che mi preme è riuscire a renderlo visibile con un clik. Per fare questo ho pensato bene di richiamare la funzione visbility dai css e per ora ho scritto questo:


<style>

#apri{
width:200px;
height:200px;
visibility:hidden;
background-color:#660099;}

</style>

<script language="JavaScript" type="text/javascript">

function openpanel()
{
document.getElementById("apri").style.visibility = "visible";
}

function closepanel()
{
document.getElementById("chiudi").style.visibility = "hidden";
}

</script>

"apri" verra ovviamente richiamato nell'html. Il mio problema è però che vorrei fare tutto con uno stesso pulsante, cioè: a un click si apre (cioè visbility= "visible") e a un secondo click sullo stesso pulsante si chiuda (visibility = "hidden"). Dovrei usare un "if" per fare questo creando una particolare condizione ma ci ho provato e non so come dirgli: "se il mio elemento è visibile nascondilo o viceversa". Qualcuno sa come aiutarmi?

Avrei un pò di urgenza chiunque possa darmi anche solo una piccola dritta a breve è ben accetto!

Un grazie caloroso a tutti!

[artorius]

basta che controllo il valore di visibility iniziale se è hidden allora è nascosto e viceversa.

una cosa: se imposti il valore con il CSS non puoi leggerlo con style, devi impostare lo style visibility direttamente sull'elemento:

<div id="apri" style="visibility: hidden;">
Blabla
</div>

[Maverick01]

Quindi oltre a scrivere lo "stile" direttamente nell'elemento che condizione dovrei scrivere nella funzione javascript?

Grazie

[artorius]

function toogleVisibility(id){
   var elem = document.getElementById(id);
   if(elem.style.visibility.toLowerCase() == 'hidden')
      elem.style.visibility = 'visibile';
   else
      elem.style.visibility = 'hidden';
}

Poi chiami solo

toogleVisibility('apri');