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.
0 1 2 3
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.
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.
0 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
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.
