Blog
Inserire un testo nascosto visualizzabile tramite un bottone

Inserire un Read More di un testo senza cambio di pagina

Scopri come realizzare un testo parzialmente nascosto, che viene visualizzato completamente all'interno della stessa pagina mediante l'utilizzo di un bottone Read More.

In genere la funzione Read More, traducibile comodamente in italiano in Leggi Tutto, è una funzionalità usata dai CMS moderni, come ad esempio WordPress, attraverso la quale è possibile mostrare in homepage, o in qualsiasi altra parte del sito tu voglia, un estratto di poche parole di, ad esempio, un articolo del blog.

Questa funzione standard ti premette unicamente di vedere il contenuto intero solo reindirizzandoti verso una nuova pagina del sito web.

In alcuni casi però non hai a disposizione un contenuto molto ampio da poterli dedicare un’intera pagina, come ad esempio per dei semplici box da inserire in sidebar, oppure per trascrivere una breve recensione di un cliente o una breve descrizione di una persona, come ad esempio un intervistato.

Perciò, per questi rari casi, ti voglio illustrare come poter inserire una bottone Leggi Tutto che ti permetta di visualizzare tutto il testo nascosto, senza dover cambiare pagina.

Per prima cosa ecco come deve essere strutturato il codice Html per il tuo testo.

// HTML CODE

0
<div class="my_text_box">
1
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras ultricies lorem eget interdum porta. Sed erat felis, blandit vel vehicula a, blandit a quam. Donec nec odio sit amet elit aliquam interdum. Maecenas vestibulum nisl scelerisque, egestas arcu ut, sodales nulla. Suspendisse potenti. In eleifend magna mauris.</p>
2
</div>
3
<p class="my_read_more"><a class="my_box_button" href="#">Leggi tutto</a></p>

Segue poi lo stile Css da assegnare alle varie classi.

Molto importanti sono le proprietà max-height e l’overflow: hidden, che ti permettono di nascondere in un primo momento parte del testo.

// CSS CODE

0
.my_text_box {
1
max-height: 70px;
2
overflow: hidden;
3
text-align: center;
4
background-color: #f3f3f3;
5
}
6
.my_box_button {
7
background-color: #e85f23;
8
padding: 5px;
9
border-radius: 5px;
10
color: #fff;
11
}
12
.my_read_more {
13
text-align: center;
14
padding: 10px 0;
15
}

Infine devi fare caricare alla pagina in cui desideri questo effetto il seguente script in jQuery, che compie la magia e ti permette di visualizzare tutto il contenuto del tuo box.

// JS CODE

0
<script type="text/javascript">
1
var el, elp, ps, up, totalHeight;
2
3
jQuery(document).ready(function(){
4
5
jQuery(".my_box_button").click(function() {
6
7
totalHeight = 0;
8
9
el = jQuery(this);
10
elp = el.parent();
11
up = elp.prev();
12
ps = up.find("p");
13
14
ps.each(function() {
15
totalHeight += jQuery(this).outerHeight();
16
});
17
18
up
19
.css({
20
"height": up.height(),
21
"max-height": 9999
22
})
23
.animate({
24
"height": totalHeight
25
});
26
27
// Rimuove il bottone read more
28
elp.fadeOut();
29
30
return false;
31
32
});
33
34
});
35
</script>

Una volta inserito tutto ciò, il risultato finale sarà qualcosa come questo:

Come esempio ho usato i prima versi della famoso cantico dell’Inferno della Divina Commedia di Dante Alighieri.

Nel mezzo del cammin di nostra vita
mi ritrovai per una selva oscura
ché la diritta via era smarrita.
Ahi quanto a dir qual era è cosa dura
esta selva selvaggia e aspra e forte
che nel pensier rinova la paura!
Tant’è amara che poco è più morte;
ma per trattar del ben ch’i’ vi trovai,
dirò de l’altre cose ch’i’ v’ho scorte.
Io non so ben ridir com’i’ v’intrai,
tant’era pien di sonno a quel punto
che la verace via abbandonai.
Ma poi ch’i’ fui al piè d’un colle giunto,
là dove terminava quella valle
che m’avea di paura il cor compunto,
guardai in alto, e vidi le sue spalle
vestite già de’ raggi del pianeta
che mena dritto altrui per ogne calle.
Allor fu la paura un poco queta
che nel lago del cor m’era durata
la notte ch’i’ passai con tanta pieta.
E come quei che con lena affannata
uscito fuor del pelago a la riva
si volge a l’acqua perigliosa e guata,
così l’animo mio, ch’ancor fuggiva,
si volse a retro a rimirar lo passo
che non lasciò già mai persona viva.
Poi ch’èi posato un poco il corpo lasso,
ripresi via per la piaggia diserta,
sì che ‘l piè fermo sempre era ‘l più basso.

Leggi tutto

Utilizzando il sito, accetti l'utilizzo dei cookie da parte nostra. Maggiori informazioni

Questo sito utilizza i cookie per fornire la migliore esperienza di navigazione possibile. Continuando a utilizzare questo sito senza modificare le impostazioni dei cookie o cliccando su "Accetta" permetti il loro utilizzo.

Chiudi