Bottoni di scelta per mostrare testi diversi in uno stesso spazio.

Come inserire in una pagina web un contenitore che cambia il contenuto quando si clicca su uno dei bottoni delle opzioni. Si utilizza la libreria jQuery.

A seguito di una richiesta ricevuta in un commento vado a illustrare un metodo per mostrare un testo diverso in funzione del bottone selezionato dal lettore o meglio un contenitore con più opzioni di contenuto. In altri termini pensate di avere un blog che parli di cinema. Si potranno creare per esempio i bottoni Interpreti, Personaggi, Trama, Produzione. Nella prima scheda si potranno inserire i nomi degli attori protagonisti, nella seconda i nomi e le caratteristiche dei personaggi interpretati, nella terza lo sviluppo della trama e infine nella quarta le notizie sulla produzione come il nome del regista, quello del produttore, dell'autore della colonna sonora e così via.

Sarà poi il lettore a cliccare sulla scheda corrispondente per avere le informazioni che desidera. Un tale metodo funziona anche come spoiler per evitare di mostrare in modo palese la trama del film anche a chi non la voglia conoscere per avere l'effetto sorpresa. L'esempio fatto per un sito di cinema può essere esteso a un sito di ricette con varie opzioni per cucinare lo stesso ingrediente.

Ed ecco una GIF sul funzionamento di questa interessante personalizzazione

Vediamo innanzitutto come inserire questa possibilità in una pagina web. Nello specifico di un blog sus Blogger si deve aprire l'Editor del post e andare su HTML quindi incollare questo codice

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<style>
#menu_about a {
font-size:20px;
font-weight:500;
color:#036 !important;
}
#pages_about {
width:500px;
border:1px solid #00f;
font-size:16px;
}
</style>
<div align='center'>
<div id="menu_about">
<a class="link" href="#about" data-link="first">
   &nbsp; Opzione1
</a> &#8226;
<a class="link" href="#about" data-link="second">Opzione2</a> &#8226;
<a class="link" href="#about" data-link="third">Opzione3</a> &#8226;
<a class="link" href="#about" data-link="fourth">Opzione4</a> &#8226;
<a class="link" href="#about" data-link="fifth">Opzione5</a>
</div>
<div id="pages_about" class="textContainer_about">
<div class="textWord_about" data-link="first">
<p> <span style='color:red;'>Questo testo è visibile quando si clicca sulla Opzione1</span><br/>Morbi a metus. Phasellus enim erat, vestibulum vel, aliquam a, posuere eu, velit. Nullam sapien sem, ornare ac, nonummy non, lobortis a, enim. Nunc tincidunt ante vitae massa. Duis ante orci, molestie vitae, vehicula venenatis, tincidunt ac, pede. Nulla accumsan, elit sit amet varius semper, nulla mauris mollis quam, tempor </p>
</div>
<div class="textWord_about" data-link="second">
  <p> <span style='color:blue;'>Questo testo è visibile quando si clicca sulla Opzione2</span><br/>Aliquam in lorem sit amet leo accumsan lacinia. Integer rutrum, orci vestibulum ullamcorper ultricies, lacus quam ultricies odio, vitae placerat pede sem sit amet enim. Phasellus et lorem id felis nonummy placerat. </p>
</div>
<div class="textWord_about" data-link="third">
  <p> <span style='color:green;'>Questo testo è visibile quando si clicca sulla Opzione3</span><br/>Fusce dui leo, imperdiet in, aliquam sit amet, feugiat eu, orci. Aenean vel massa quis mauris vehicula lacinia. Quisque tincidunt scelerisque libero. Maecenas libero. Etiam dictum tincidunt diam. </p>
</div>
<div class="textWord_about" data-link="fourth">
  <p> <span style='color:orange;'>Questo testo è visibile quando si clicca sulla Opzione4</span><br/>Donec ipsum massa, ullamcorper in, auctor et, scelerisque sed, est. Suspendisse nisl. Sed convallis magna eu sem. Cras pede libero, dapibus nec, pretium sit amet, tempor quis, urna. </p> 
</div>
<div class="textWord_about" data-link="fifth">
  <p> <span style='color: brown;'>Questo testo è visibile quando si clicca sulla Opzione5</span><br/>In sem justo, commodo ut, suscipit at, pharetra vitae, orci. Duis sapien nunc, commodo et, interdum suscipit, sollicitudin et, dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. </p>
</div>
</div>
</div>
<script type="text/javascript">
$('.textWord_about').hide();
$('.link').click(function() {
    $('.textWord_about').hide();      
    $('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({
        width: '200px'
    }, 300);
});
</script>

Si deve pubblicare sempre da HTML senza tornare su Scrivi. Se lo facessimo Blogger inserirà dei link automatici che impediranno il funzionamento del javascript.

Demo
Clicca qui

PERSONALIZZAZIONI DELLO SCRIPT

Nei CSS evidenziati di verde si possono modificare i codici dei colori dei link e le dimensioni dei caratteri degli stessi link (20px) e del testo del riquadro (16px). È anche possibile configurare lo stile del bordo del rettangolo contenitore oppure eliminarlo.  L'insieme dei 5 bottoni è centrato con il tag center mentre la larghezza proposta del contenitore è di 500 pixel.

Il contenuto di ciascun rettangolo colorato di blu compreso tra <p> e </p> è puramente indicativo e può essere personalizzato a piacere inserendo anche del testo già formattato con relativo codice anche con immagini o con dei video. Ho inserito 5 diverse opzioni che credo siano ampiamente sufficienti. Se se ne volessero usare per esempio solo 4 basterà cancellare la riga

<a class="link" href="#about" data-link="fifth">Opzione5</a>

Nel caso in cui nel nostro modello fosse già presente la libreria jQuery si può fare a meno di incollare la riga evidenziata di giallo.

INSTALLARE QUESTO SCRIPT NEL MODELLO DI BLOGGER

Se vogliamo usare questo script solo in pochi articoli allora si può incollare tutto il codice nell'Editor del post. Se invece volessimo usare questa tecnica in molti casi allora potrebbe essere conveniente modificare il modello in modo da incollare solo una parte del codice. Se si segue questa opzione, dopo aver salvato il template, si deve andare su Modello > Modifica HTML e cercare la riga </head>. Subito sopra si incollano le righe evidenziate di giallo (solo se non c'è jQuery) e quelle evidenziate di verde. Successivamente si cerca la riga </body> e, subito sopra, si incolla il codice evidenziato di beige. Infine si salva il modello. Quando si vorrà pubblicare un contenitore a più opzioni come quello presentato qui basterà quindi incollare solo la parte di codice non evidenziata. Concludo ricordando che se si procede alla modifica del post si deve sempre ripubblicarlo da HTML e non da Scrivi dopo aver verificato che Blogger non abbia inserito dei link indesiderati. 

AGGIORNAMENTO

Se avete deciso di inserire il codice nel modello e se il codice evidenziato di beige non vi viene salvato allora lo dovete modificare in questo modo

<script type='text/javascript'>
//<![CDATA[
$('.textWord_about').hide();
$('.link').click(function() {
    $('.textWord_about').hide();    
    $('.textWord_about[data-link=' + $(this).data('link') + ']').fadeIn({
        width: '200px'
    }, 300);
});
//]]>
</script>