mostrare/nascondere gli elementi di una pagina

Molte volte ci si ritrova ad avere pagine lunghe e complesse, nelle quali alcuni argomenti sono superflui e risulta quindi necessario nascondere alcuni elementi. Per questo motivo oggi vi presenterò una funzione javascript generale per nascondere gli elementi in modo automatico.

Per nascondere un’elemento basta infatti modificare la proprietà, ccs, “display“, impostandola a “none“. per ripristinare l’elemento basta impostarla nulla o uguale a “block“.
Quindi creandosi una funzione javascript è facilmente possibile nascondere più elementi, cioè è possibile applicare lo stesso principio a più elementi in modo indipendente dagli altri, creeremo quindi una funzione generale per nascondere gli elementi.

Ecco qui un codice d’esempio:

<script type="text/javascript" language="javascript1.5">
function mostra(nelemento) {
	if (document.getElementById("nascosto"+nelemento).style.display== "none"){
		document.getElementById("nascosto"+nelemento).style.display = "block";
		document.getElementById("mostra"+nelemento).innerHTML = "nascondi";
	}else{
		document.getElementById("nascosto"+nelemento).style.display= "none";
		document.getElementById("mostra"+nelemento).innerHTML = "mostra";
	}
}
</script>
<a href="javascript:mostra(1)"><h1><span id="mostra1">mostra</span> testo</h1></a><br />
<div id="nascosto1" style="display:none;">
testo nascosto
</div>
<a href="javascript:mostra(2)"><h1><span id="mostra2">mostra</span> testo2</h1></a><br />
<div id="nascosto2" style="display:none;">
testo nascosto2
</div>

In questo caso abbiamo due testi indipendenti ognuno con il proprio “tasto” per mostrare/nascondere l’elemento stesso.

Notiamo che la funzione non fa altro che ricevere come parametro un numero che identifica l’elemento da nascondere e il suo “tasto”, si può facilmente osservare quindi che l’elemento da nascondere deve essere identificato da un id uguale a “nascosto + numero_elemento“; mentre il “tasto” dinamico, che al suo interno deve avere come testo di default “mostra“, è identificato da “mostra + numero_elemento“. Infine il tasto non è altro un link che punta a “javascript:mostra( numero_elemento )”

N.B. ovviamente il link può includere anche altro testo, parti di testo fisse, ad esempio qui include la stringa “testo + numero_elemento“.

Possiamo quindi generalizzare tutto ciò e crearlo dinamicamente da php, utile se i dati, ad esempio, provengono da un database:

<script type="text/javascript" language="javascript1.5">
function mostra(nelemento) {
	if (document.getElementById("nascosto"+nelemento).style.display== "none"){
		document.getElementById("nascosto"+nelemento).style.display = "block";
		document.getElementById("mostra"+nelemento).innerHTML = "nascondi";
	}else{
		document.getElementById("nascosto"+nelemento).style.display= "none";
		document.getElementById("mostra"+nelemento).innerHTML = "mostra";
	}
}
</script>
<?php
for($i=0;$i<10;$i++)
print "<a href=\"javascript:mostra(".$i.")\"><h1><span id=\"mostra".$i."\">mostra</span> testo</h1></a><br />
<div id=\"nascosto".$i."\" style=\"display:none;\">
testo nascosto
</div>";
?>

mostrare/nascondere gli elementi di una pagina by cardinale claudio is licensed under a Creative Commons Attribution-ShareAlike 4.0 International License.