Tra gli ultimi articoli

Script che chiude un div e ne apre un altro al click su un link

javascriptQuesto script JavaScript ci servirà per dare una ventata di dinamicità alle nostre pagine web, grazie a questo script, cliccando su un link, si chiuderà un div e ne aprirà un’altro al suo posto.

Script JavaScript:

<script type="text/javascript">
function cambiaDiv() {
if (document.getElementById('div1')) {

if (document.getElementById('div1').style.display == 'none') {
document.getElementById('div1').style.display = 'block';
document.getElementById('div2').style.display = 'none';
}
else {
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'block';
}
}
}
</script>

Html

Qui l’html, il div1 è impostato di default su none dando precedenza a div2, cliccando sul link, che in questo caso ho modificato in un bottone, la pagina chiuderà ad ogni click il div presente alternandolo con il div nascosto.


<div id="div1">
 <a onclick="cambiaDiv();" ><button>Div1 aperto</button></a>
</div>
<div id="div2" style="display: none;">Div2 Aperto!</div>

Piccola nota, se volessimo che al click sparisse anche il bottone stesso.. ci basterebbe inserirlo all’interno dello stesso div, ovviamente inserendolo nel div visualizzato di default (in questo caso div2).

About Stefano Berardi

Stefano Berardi
''non sono superman... I'm not superman..."