[JQuery] mostra/nascondi

[Dedozzo]

Ho creato questa funzione in jquery che dovrebbe nascondere tutti i

figli di <h3>. In realtà funziona correttamente solo con i primi

nascondendo e non mostrando mai gli eventuali secondi o terzi

. Dove sbaglio?

$(document).ready(function(){
  $('h3').click(function() {
    if (!$(this).hasClass("actived")) {
      $('h3').removeClass("actived");
      $(this).addClass("actived");
      $('h3 ~ p').slideUp(400);
      $(this).next().delay(400).slideDown(400);
    }
  });
  $('h3 ~ p').hide().first().show();
  $('h3').first().addClass("actived");
}); 

[Stan]

Semplicemente

$('h3 p') direi

(semanticamente non credo abbia molto senso inserire dei paragrafi dentro degli hqualcosa)

[Dedozzo]

No, h3 p non funziona perché naturalmente non inserisco paragrafi dentro i titoli. Vorrei selezionare tutti i paragrafi adiacenti ai relativi titoli.

<h3>111</h3>


aaa</p>


bbb</p>

<h3>222</h3>


aaa</p>


bbb</p>

<h3>333</h3>


aaa</p>

<h3>444</h3>


aaa</p>


bbb</p>


ccc</p>

[cavicchiandrea]

Funziona solo il primo

perché ti sposti di uno $(this).next() se vuoi spostarti di due $(this).next().next() etc...

[Stan]

http://api.jquery.com/next-siblings-selector/

Se ho capito bene così seleziona tutti i successivi del tuo selettore, per cui al primo h3 ti prende tutti i paragrafi dopo (ovvero tutti).

Non puoi chiudere ogni blocco in un div? così prendi i paragrafi del parent

<div>
<h3>111</h3>


aaa</p>


bbb</p>
</div>

<div>
<h3>222</h3>


aaa</p>


bbb</p>
</div>

js

$('h3').click(function(){
  $("p", $(this).parent());
})

[fcaldera]

usa nextAll()


$(this).nextAll('p').delay(400).slideDown(400);

[Dedozzo]

Purtroppo non posso racchiudere i p in un div, altrimenti avrei risolto semplicemente.

Con nextAll mi apre tutti i p, anche mettendo h3 ~ p. Inserendo vari next() funziona, ma non ho controllo sul numero di p (l'utente inserisce autonomamente il testo).
Inoltre della prima "serie" h3+p+p+p, che dovrebbe essere mostrata all'inizio, si visualizza solo h3+p.

[Vindav]

puoi fare cosi:

$(this).nextUntil("h3").delay(400).slideDown(400);

[Dedozzo]

Ecco, così funziona! Mi rimane da risolvere il problema della prima serie h3+p+p... attualmente quando si carica la pagina viene visualizzato solo il primo p, anche se non capisco perché!

$('h3 ~ p').hide().first().show(); Secondo logica dovrebbe funzionare, o no?

[Vindav]

$('h3 ~ p').hide();
$('h3').first().nextUntil("h3").show();