Come creare panelli Accordion con Bootstrap

 Panelli accordion  posiamo creare anche tramite Bootstrap. Ellemento accordion permette di aprire o chiudere panelli. Questa funzione è molto comoda e può essere utilizzata ovunque:

  •  

Principali nozioni su Bootstrap.

  1. Introduzione a Bootstrap
  2. Colegare fail di bootstrap
  3. La sistema a grglia
  4. Offset in Bootstrp. Spazio fra le colonne
  5. Ordine delle colonne
  6. La prima pagina html su Bootstrap
  7. Header con bootstrap
  8. Come realizzare menu responsive con Bootstrap
  9. Formatazione del testo.
  10. Come creare bottoni con Bootstrap
  11. Come rendere immagini responsive con Bootstrap
  12. Carosello bootstrap
  13. Bricioli di pane con Bootstrap
  14. Come realizzare accordeon

Dalla mia esperienza posso dire che se il vostro progetto web è basto su Bootstrap questa funzione accordion  si utilizzerà costantemente. Il plugin è molto facile da usare, non richiede impostazioni particolari e consente di chiudere tutti gli elementi a livello di blocco. Ora ti faccio vedere come usarlo.

Esempio

Per fare questo esempio ho creato un bottone e un blocco con il testo nascosto. Cliccando botone il testo o sara mostrato o o vera nascosto.

Link

Michel Nostradamus viene alla luce a Saint-Rémy , a mezzogiorno del giovedì 14 Dicembre del 1503, figlio del notaio Jacques o Jaume De Nostredame e della convertita Renée de Saint-Rèmy. Questa é una piccola cittadina della Provenza (Francia meridionale), che si trova a 15 km dalla città gallo-romana di Arles, caratterizzata dall'arco di trionfo di Mario e dal mausoleo di Saint Paul. E' costruita presso le rovine di GLANUM, famoso luogo di culto per i galli, e negli scavi del 1921 sono state trovate vestigia ellenistiche, greche e romane. .

Penso che ora hai capito perche si chiama accordion. Con questa soluzione potrei o mostrare o nascondere  contenuto

Impostazioni del accordion di bootstrap

Dobbiamo abvere due oggetti, dove il primo è quello di controllare la visibilità del secondo. Il primo può essere un collegamento o un pulsante.

Per stabilire un legame far l'elemento di controllo il blocco da mostrare ci sono due metodi:

1. Usando attributo href per il link,
    2.Usando un bottone o qualsiasi altro oggetto con un attributo data-target per esempio una croce o altro simbolo

Indipendemente dal tipodi metodo  e hrefdata-target elemento di controllo  deve avere anche la proprieta  data-toggle="collapse". E al  blocco contera il contenuto che voglimo nasondere o mostrare  è necessario assegnare una classe o un id di riconoscimento .

Creare panello accordion mediante data-attributi

Vedimo il codice dal esempio mostrato sopra dove ho usato entrambi i tipi di controllo agiungendo  attributi data-toggle="collapse" e data-target ad elementi do controllo. E come potete notare  data-target ha un valore di riferimento al  CSS-selettore del elemento la visibilità del quale vogliamo gestire.

<div class="example">
<p><a class="btn btn-info" href="#demo" data-toggle="collapse">Link</a>/*con utilizzo  href="/ "*/
<button class="btn btn-info" data-toggle="collapse" data-target="#demo">Bottone</button></p>/*con utilizzo data-target=" "*/
<div id="demo">/**/
<p>Michel Nostradamus viene alla luce a Saint-Rémy , a mezzogiorno del giovedì 14 Dicembre del 1503, figlio del notaio Jacques o Jaume De Nostredame e della convertita Renée de Saint-Rèmy. Questa é una piccola cittadina della Provenza (Francia meridionale), che si trova a 15 km dalla città gallo-romana di Arles, caratterizzata dall'arco di trionfo di Mario e dal mausoleo di Saint Paul. E' costruita presso le rovine di GLANUM, famoso luogo di culto per i galli, e negli scavi del 1921 sono state trovate vestigia ellenistiche, greche e romane. </p>.
</div>
</div>

Per impostazione predefinita, questo elemento sarà nascosto al apertura della pagina nel browser. Se si desidera che subito  dal inizio sara mostrato apperto bisogna  aggiungere ad esso la  classe aggiuntiva .in

Gestione accordion tramite JavaScript

Se data-*  attributi non vi vanno bene, si può fare senza di esso, realizzando la funzione di chiusura del blocco nel nostro accordion utilizzando js:

$('.collapse').collapse()

Nascondere automaticamente altre blocchi (fisarmonica o accordion)

Per chiudere automaticamente tutti gli altri elementi alla visualizzazione di un nuovo, dobimo trasmettere ad elemento di controllo il parametro data-parent="#selector" , dove  #selector  puo rapresentare un id, class, o qualsiasi altro css-selettore. Questa soluzione è comoda per la realizzazione di un questionario , per visualizzare le risposte alle domande più frequenti. Così, dopo aver selezionato una delle risposte, tutti gli altri saranno chiusi  automaticamente. Il codice di tale blocco troverai negli esempi che seguono.

Metodi collapse in Bootstrap.js

metodo descrizione
.collapse(options) Inizializza elemento nascosto con parametri option. La seguente tabella elenca i parametri delle option.
.collapse("toggle") Espande o chiude il blocco. A seconda dello stato corrente.
.collapse("show") Apre elemento/blocco
.collapse("hide") Chiude  elemento/blocco

Parametri bootstrap collapse

Parametri come anche  l'inizializzazione dell'oggetto, si possa  trasmettere per mezzo di data-* attributi  o tramite JavaScript. Nel primo caso, il nome dell'attributo va dopo il data-, per esempio, data-parent=".container"

Parametro Tipo Da default Descrizione
parent selector false Se si passa un selettore, quindi tutti gli oggetti nascosti al suo interno saranno nascosti quando si visualizza l'unità genitore.
toggle boolean true Se cambiare la visibilita del elemento alla chiama

Esempio:  semplice chiusura d'elementi

Questo è più semplice l'esempio dello script:

<button class="btn btn-info" data-toggle="collapse" data-target="#hide-me">Collapse Bootstrap.js</button>
<div id="hide-me" class="collapse in">
Vediamo il testo nascosto. 
</div>

Vorrei far notare: grazie ad inserimento della classe  .in nel codice di nostro accordion l'elemento è visibile (aperto) dal inizio

Sono il testo che puo essere nascosto clicando il botton sopra

Esempio: Come nel nostro effeto di accordion aprire un elemento e automaticamente chiudere quello aperto al interno del contenitore genitore 

<div class="panel-group" id="collapse-group">
 <div class="panel panel-default">
 <div class="panel-heading">
 <h4 class="panel-title">
 <a data-toggle="collapse" data-parent="#collapse-group" href="#el1">Primo elemento </a>
 </h4>
 </div>
 <div id="el1" class="panel-collapse collapse in">
 <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
 </div>
 </div>
 <div class="panel panel-default">
 <div class="panel-heading">
 <h4 class="panel-title">
 <a data-toggle="collapse" data-parent="#collapse-group" href="#el2">Secondo  elemento</a>
 </h4>
 </div>
 <div id="el2" class="panel-collapse collapse">
 <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
 </div>
 </div>
 <div class="panel panel-default">
 <div class="panel-heading">
 <h4 class="panel-title">
 <a data-toggle="collapse" data-parent="#collapse-group" href="#el3">terzo elemento </a>
 </h4>
 </div>
 <div id="el3" class="panel-collapse collapse">
 <div class="panel-body">Lorem ipsum dolor sit amet, consectetur adipisicing elit,
 sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
 </div>
 </div>
</div>

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Letto 912 volte