In WordPress maggiore è il numero di widget posti nelle colonne laterali o nel footer maggiore è l'altezza complessiva del documento. A volte si vorrebbe che il visitatore si concentrasse sul contenuto senza distrazioni e che gli venisse data la possibilità di visionare il contenuto dei widget solo quando è realmente interessato. jQuery ci viene in aiuto con una soluzione presa in prestito dai menu di tipo accordion. Vediamo quale.
Solitamente un widget ha questa struttura:
<div class="widget">
<h3>Et ideo autem aquis</h3>
<ul>
<li><a href="#">Ideo autem sit</a></li>
<li><a href="#">Ideo autem sit</a></li>
<li><a href="#">Ideo autem sit</a></li>
<li><a href="#">Ideo autem sit</a></li>
<li><a href="#">Ideo autem sit</a></li>
</ul>
</div>
Questa struttura può cambiare da tema a tema arricchendosi di nuovi elementi e attributi, ma solitamente abbiamo sempre il titolo del widget seguito dal suo contenuto.
Con i CSS possiamo nascondere inizialmente il contenuto lasciando solo il titolo:
div.widget h3 {
background: #333;
color: #fff;
padding: 0.3em;
border-radius: 5px;
margin: 1em 0 0 0;
cursor: pointer;
}
div.widget ul {
margin: 1em 0;
padding: 0.4em;
list-style: none;
background: #ccc;
border-top: 2px solid #444;
border-bottom: 1px solid #444;
display: none;
}
Quindi associamo un evento click al titolo per mostrare o nascondere il contenuto del widget a seconda se sia già visibile o no:
$(function() {
$('div.widget', document.body).each(function() {
var $widget = $(this);
var $title = $('h3', $widget);
var $list = $title.next();
$title.click(function() {
if($list.is(':hidden')) {
$list.slideDown(600);
} else {
$list.slideUp(600);
}
});
});
});
Potete visionare l'esempio finale in questa pagina.