Come inserire un accordion (fisarmonica) nella sidebar (barra laterale) di WordPress

accordion

La barra laterale (sidebar) è quella parte fissa, a destra e/o a sinistra, che vediamo nelle pagine di un sito. Generalmente serve a tenere sempre presente e sotto mano alcune funzioni proprie del sito, quali la possibilità di prenotazione di un B&B, gli ultimi articoli di un blog, un form di contatto, l’iscrizione alla news-letter, e molte altre funzioni come un widget meteo o di login.

accordion

Spesso questa lista di widget allunga di parecchio la barra laterale e, in caso di un articolo o di una pagina dove il contenuto non pareggia in altezza la lunghezza della sidebar, si ha un brutto effetto grafico con il contenitore dell’articolo o della pagina miseramente vuoto.

Un altro problema dei widget nelle barre laterali è dovuto dai bot, quei programmi automatici che sondano la rete per cercare qualsiasi form da compilare inviando spam nei messaggi.

Per ovviare a questo si possono usare gli “accordion”.

Cosa è un accordion?

Un accordion è un pulsante che, se cliccato, fa comparire (o sparire) un qualsiasi contenuto. Quindi se abbiamo una sidebar lunga, magari con un form con richiesta di dati e informazioni abbastanza complesso e lo vogliano “nascondere” per non allungare troppo la pagina possiamo farlo con questa “fisarmonica”.

I metodi per aggiungere un accordion

I metodi per aggiungere un accordion sono molti, i più usati sono dei semplici plug-in ma molti di loro non possono essere usati nella sidebar e alcuni vanno in conflitto con i page builder. Quindi, dato che è un procedimento abbastanza semplice e veloce forse è il caso di fare tutto a mano. Questo rende più sicuro il sito (ogni plug-in è un potenziale pericolo) e più veloce – uno script di una decina di righe fa meno richieste di un plug-in.

La pratica

L’accordion è composto da tre parti:

    1. Il css, il foglio di stile che comanda il colore, la posizione e la visibilità dei tasti e dei componenti;
    2. l’HTML, il codice con quello che vogliamo scrivere e nascondere;
    3. lo script che fa funzionare il tutto.

Il css

Il css va aggiunto al foglio di style, oppure essere aggiunto nel campo del css personalizzato o collegato con @import al css.

.accordion {
background-color: #eee;
color: #444;
cursor: pointer;
padding: 18px;
width: 100%;
border: none;
text-align: left;
outline: none;
font-size: 15px;
transition: 0.4s;
}
.active, .accordion:hover {
background-color: #ccc;
}
.panel {
padding: 0 18px;
display: none;
background-color: white;
overflow: hidden;
}

Il codice html:

Il codice html è semplicissimo. Basta aggiungere questo semplice codice:

 <button class="accordion">Pulsante </button>
<div class="panel">
  <p>Lorem ipsum...</p>
</div>

Sostituendo la scritta nel paragrafo con quello che ci interessa inserire. Si possono inserire anche shortcode dei form di contatto o altro. Va inserito nella sidebar, editando la pagina del tema.

Il codice JavaScript

Il codice .js va aggiunto o nel footer del tema o nell’header. Dato che quando si carica la pagina, finchè non è stato caricato il codice, la pagina blocca il caricamento di altre risorse, è preferibile inserire il codice nel footer. É leggermente più veloce il caricamento della pagina.

var acc = document.getElementsByClassName("accordion");
var i;

for (i = 0; i < acc.length; i++) {
acc[i].addEventListener(“click”, function() {
/* Toggle between adding and removing the “active” class,
to highlight the button that controls the panel */
this.classList.toggle(“active”);

/* Toggle between hiding and showing the active panel */
var panel = this.nextElementSibling;
if (panel.style.display === “block”) {
panel.style.display = “none”;
} else {
panel.style.display = “block”;
}
});
}

Non serve altro. Il codice può essere usato anche in una pagina qualsiasi. Per “nascondere” un form, una scritta o qualsiasi cosa.

Lascia un commento

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Su di me

Genovese di origine, trasferito in Riviera, da sempre appassionato di tecnologia comincio nel 2003 a smanettare su internet per poi fare della passione un lavoro.

Articoli recenti

tapulli checkout field

Tapulli Checkout Field

Per un progetto un po’ particolare mi serviva un semplice sistema per nascondere alcuni campi di checkout di Woocommerce. Niente di particolare, ma per Woocommerce

Leggi Tutto »