html-Tre differenti modi di creare testo a comparsa

Testo a comparsa

Tre differenti modi di creare testo a comparsa.

Testo a comparsa

Pubblicato il: 9-5-2019

Ultima Modifica: 6-1-2024

Testo a comparsa usando solo HTML

Gli elementi che consentono di creare un blocco di testo a comparsa sono details e summary, questi due elementi sono stati introdotti in Html 5.1
Per mostrare e nascondere il blocco di testo l'utente dovrà solo fare click sul contenuto presente all'interno del tag summary, la prima volta per mostrare, la seconda volta per nascondere.
In precedenza per realizzare questa funzionalità era necessario ricorrere a codice Javascipt, comunque tale funzionalità per il momento è disponibile solo sui browser chrome, firefox e opera, non è invece ancora disponibile su Internet explorer, Microsoft Edge e Safari.

Quì sotto un semplice esempio.

Testo a comparsa usando solo HTML

<html>
<head>
<title>Testo a comparsa</title>

<style type="text/css">

details {
margin: 10px;
width: 25%;
font-size:x-large;
}

summary {
background-color: lavender;
padding: 20px;
color: black;
cursor: pointer;
font-size: xx-large;
}

</style>

</head>
<body>

<details>
<summary>Visualizza testo</summary>
riga di testo uno<br>
riga di testo due<br>
riga di testo tre<br>
riga di testo quattro<br>
riga di testo cinque<br>
riga di testo sei
</details>

</body>
</html>

Copiando e incollando questo codice in una pagina con estensione .html e mandandola in esecuzione su un browser compatibile come menzionato sopra si può vedere il risultato.

Testo a comparsa al passaggio del mouse usando HTML e CSS

Questo è un esempio di testo a comparsa al passaggio del mouse sopra di un elemento che causa la visualizzazione di un blocco di testo, quando il mouse esce dall'elemento che a causato la visualizzazione del blocco di testo il blocco scompare di nuovo. Questo effetto è possibile grazie all'utilizzo oltre che dell'HTML anche dei CSS. L'elemento CSS più importante per questo effetto è :hover

Vediamo quì sotto il risultato, segue il codice completo.

Lista della spesa

detersivo lavatrice
dentifricio
pizze bianche
pane integrale
spazzolino da denti
sughi pronti
spaghetti

Testo a comparsa al passaggio del muose usando HTML e CSS

<!DOCTYPE html>
<html>

<head>
<meta content="it" http-equiv="Content-Language">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Testo a comparsa</title>
<style type="text/css">

#nav div{
padding:10px;
background-color:black;
color:white;
font-size:x-large;
width:25%;
cursor:pointer;
margin-bottom:1px;
}

#nav div + div{
color:white;
background-color:lightseagreen;
padding:10px;
width:25%;
display:none;
font-size:large;
}

#nav div:hover + div{
display: block;
}


</style>
</head>

<body>


<div id="nav">
<div>Lista della spesa</div>
<div>
detersivo lavatrice<br>
dentifricio<br>
pizze bianche<br>
pane integrale<br>
spazzolino da denti<br>
sughi pronti<br>
spaghetti
</div>
</div>
</body>

</html>

Il terzo metodo usa due <div>, il primo è sempre visibile e rappresenta il pulsante da cliccare che al primo click visualizza il blocco di testo sottostante e al secondo click lo nasconde, questo comportamento è reso possibile oltre che dalla proprietà display CSS anche da una funzione Javascript che controlla ogni volta che viene eseguita il nome della classe assegnato al secondo <div> e lo sostituisce opportunamente a seconda che deve visualizzare o nascondere il blocco.
Qui sotto è possibile testare il tutto, ancora più sotto il codice completo.

taglia testo
copia testo
incolla testo
salva documento
proprietà documento
esci

Testo a comparsa e scomparsa cliccando con il mouse e usando HTML CSS e Javascript

<!DOCTYPE html>
<html>

<head>
<meta content="it" http-equiv="Content-Language">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>menù</title>

<script type="text/javascript">

function cambia(){
var t=document.getElementById("lista");
t.className=="nascondi"? t.className="mostra": t.className="nascondi";
}


</script>
<style type="text/css">
#menu{
padding:10px;
background-color:blue;
color:white;
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:x-large;
width:200px;
cursor:pointer;
margin-bottom:2px;
border:1px blue solid;
}

.nascondi, .mostra{
padding:10px;
color:black;
font-family:Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
font-size:large;
display:none;
width:200px;
border:1px black solid;
}

.mostra{ 
display:block;
}

</style>

</head>

<body>
<div id="menu" onclick="cambia()">Menù</div>
<div id="lista" class="nascondi">
taglia testo<br>
copia testo<br>
incolla testo<br>
salva documento<br>
proprietà documento<br>
esci
</div>
</body>

</html>

Copiare e incollare il codice completo quì sopra per testare separatamente l'esempio.