Codice:
$.fn.extend({
toggleText : function(a, b) {
var isClicked = false;
var that = this;
this.click(function() {
if (isClicked) {
that.text(a);
isClicked = false;
} else {
that.text(b);
isClicked = true;
}
});
return this;
}
});
$("ul#all").hide();
$("#veditutto a").click( function() {
$("ul#last").slideToggle(400);
$("ul#all").slideToggle(400);
return false;
});
$("#veditutto a").toggleText("Vedi tutto", "Vedi una parte");
Codice:
<div class="section">
<ul id="last">
<li>
......
</li>
<li>
......
</li>
<li>
......
</li>
</ul>
<ul id="all">
<li>
......
</li>
<li>
......
</li>
<li>
......
</li>
</ul>
<div id="veditutto">
<a href="#"><span class="arrow"></span>Vedi tutto</a>
</div>
</div>
Buongiorno a tutti. Spero possiate darmi una mano: il codice postato sopra fa in modo che al click sul bottone ("veditutto") ci sia uno switch tra due <ul> di cui il primo posto in display:none; Come potete notare, in alto sopra tutto, c'è un plugin che mi fa il toggle del text nel bottone una volta cliccato ($("#veditutto a").toggleText("Vedi tutto", "Vedi una parte"). Però quando avviene il toggle, la funzione elimina lo span con classe "arrow" che graficamente non è altro che la freccetta che accompagna il testo. Premesso che non posso modificare l'html, come potrei riscrivere anche lo span insieme al testo in modo tale da avere anche la freccia? (inserita lato css). Ho provato con i metodi .html() e append() ma nulla (forse li utilizzo male non so...)
Grazie anticipatamente per l'aiuto!