In un mio articolo di qualche tempo fa mi si chiede come ottenere l’effetto toggle su elementi multipli controllabili indipendentemente; ho pensato, invece di rispondere al commento con delle semplici indicazioni, perchè non scrivere un altro articolo che spiegasse nello specifico il comportamento di questo toogle multiplo? Diciamo che le cose sono simili sino al punto in cui bisogna scrivere il codice jQuery:

<script type="text/javascript">
// questo spinge jQuery a dire che siamo pronti
$(document).ready(function() {

// questo testo serve per i link Mostra/Chiudi
var showText='Mostra';
var hideText='Chiudi';

// determina se il contenuto è visibile sin dall'inizio
var is_visible = false;

$('.toggle').prev().append(' (<a href="#" class="toggleLink">'+showText+'</a>)');

// mostra tutti gli elementi con la class 'toggle'
$('.toggle').hide();

// cattura il click del link
$('a.toggleLink').click(function() {

// modifica la visibilità
is_visible = !is_visible;

// cambia le dipendenze degli elementi
$(this).html( (!is_visible) ? showText : hideText);

// toggle the display - uncomment the next line for a basic "accordion" style
//$('.toggle').hide();$('a.toggleLink').html(showText);
$(this).parent().next('.toggle').toggle('slow');

// ritorno
return false;

});
});
</script>

Questo codice va posizionato subito dopo la stringa <?php wp_head(); ?> A questo punto non ci resta che richiamare il tutto nell’HTML:

<h3>Titolo H3</h3>
	<div class="toggle"><p>Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce ac molestie ipsum. Nunc luctus ultrices metus in convallis. Duis eros ipsum, ultricies a hendrerit et, vulputate et nulla. Nulla facilisi. Aliquam egestas dapibus eleifend. In arcu magna, tincidunt ut mollis nec, pulvinar ut lacus. Aenean ornare auctor ipsum, sit amet vulputate purus pretium ut.</p></div>

<h4>Titolo H4</h4>
    <p class="toggle">Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Fusce ac molestie ipsum. Nunc luctus ultrices metus in convallis. Duis eros ipsum, ultricies a hendrerit et, vulputate et nulla. Nulla facilisi. Aliquam egestas dapibus eleifend. In arcu magna, tincidunt ut mollis nec, pulvinar ut lacus. Aenean ornare auctor ipsum, sit amet vulputate purus pretium ut.</p>
<p>Lista di elementi</p>
    <ul class="toggle">
        <li>Elemento di una lista</li>
        <li>Elemento di una lista; Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</li>
        <li>Elemento di una lista.</li>
    </ul>

Ed ecco qui l’esempio finito. Se avete dubbi, ovviamente, sono a disposizione.

0saves
Se ti è piaciuto questo articolo puoi commentare oppure condividerlo online tramite i social network.
Se invece mi adori e non vuoi perderti nemmeno uno dei miei post puoi iscriverti al Feed RSS.