RISOLTO: come modificare script jquery per aggiungere un + e - a fianco

[ajedy]

Ciao a tutti ho questo script ...

Codice: [Seleziona]

<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.stampa .mod-content').show();
$j('.stampa .header').click(function(){
$j(this).siblings('.stampa .mod-content').slideToggle(600);
});
});
</script>
che espande e contrae un modulo di news
il titolo è cursor pointer ma mi sembra ancora poco intuibile che bisogna cliccare per espandere o contrarre il contenuto
quindi vorrei aggiungere prima del testo che si trova in header un + per espandere il modulo quando è chiuso e un meno per contrarre quando il modulo è aperto.

come fare non lo so
ho rovato degli esempi in rete ma non riesco a farli girare bene.

grazie

[mmleoni]

ciao ajedy,
 per aiutare un poco i lettori che hanno perso la precedente puntata, dirò che questo topic è il seguito di questo: http://forum.joomla.it/index.php/topic,237894.0.html 


non capisco però questa linea:
$j('.stampa .mod-content').show();


di per sé il menù dovrebbe partire aperto, c'è qualche alto script che lo chiude? e non volevi che partisse chiuso?


magari questo è 'stampa' e non 'portale' e quindi è un caso diverso.


chiarito questo vediamo la soluzione.


ciao,
marco

[ajedy]

si.
sia stampa che portale partono aperti mentre altri li faccio partire chiusi [.hide].
posto il codice di portale

Codice: [Seleziona]

<script type="text/javascript">

  var $j = jQuery.noConflict();
 
$j(document).ready(function(){
$j('.portale .mod-content').show();
$j('.portale .header').click(function(){
$j(this).siblings('.portale .mod-content').slideToggle(600);

});

});
</script>


[mmleoni]

che è uguale a quello sopra...
io direi che è più efficiente inserire un'altra classe ai moduli di .portale e .stampa in modo da unificare il codice, questa classe potrebbe essere '.parteAperto'


in realtà la cosa è abbastanza semplice e si riduce ad aggiungere una classe all'elemento da cliccare in modo da inserire il più ed il meno.
di base, per lo html, la struttura è aperta ovvero il div.mod-content è visibile, quindi come condizione naturale useremo il meno come indicatore.
tanto per non avere problemi di immagini usiamo del testo per i nostri simboli ed inseriamo le seguenti definizioni nel css, poi se libero di mettere un'immagine di sfondo.

Codice: [Seleziona]

.header:after{
content:"-";
}
.collapse-show:after{
content:"+";
}

attenzione: l'ordine delle definizioni è importante!


dopo di che modifichiamo lo script in modo che, a livello dell'elemento h3.header, inserisca la classe aggiuntiva '.collapse-show' quando il menù viene chiuso:

Codice: [Seleziona]

var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.parteChiuso .mod-content').hide();
$j('.parteChiuso .header').addClass('collapse-show').click(function(){
$j(this).toggleClass('collapse-show').siblings('.mod-content').slideToggle(600);
});
});



per partire invece mantenendo i menù aperti... basta non mettere la riga che li chiude!
ma dato che non so se c'è qualcosaltro che agisce sui menù:

Codice: [Seleziona]

var $j = jQuery.noConflict();
$j(document).ready(function(){
$j('.parteAperto .mod-content').show();
$j('.parteAperto .header').click(function(){
$j(this).toggleClass('collapse-show').siblings('.mod-content').slideToggle(600);
});
});

combinando assieme i due script:

Codice: [Seleziona]

var $j = jQuery.noConflict();
$j(document).ready(function(){


$j('.parteChiuso .mod-content').hide();
$j('.parteChiuso .header').addClass('collapse-show').click(function(){
$j(this).toggleClass('collapse-show').siblings('.mod-content').slideToggle(600);
});


$j('.parteAperto .mod-content').show();
$j('.parteAperto .header').click(function(){
$j(this).toggleClass('collapse-show').siblings('.mod-content').slideToggle(600);
});


});

ho fatto tutto ad occhio, quindi spero di non aver fatto errori di distrazione, ma se non vi gettate a copiare ed incollare e provare a capire vedrete che è più facile a farsi che a spiegarsi.


ciao,
marco

[ajedy]

perfetto. sono a dire poco contento. grazie del lavoro prezioso che fai/fate