[JQuery]Modifica script e problema selezione elementi h3 p

[PazZII]

Salve a tutti,
stavo prendendo spunto da questo questo interessante tutorial per fare una specie di "Accordion".

In quell'esempio struttura il documento più o meno così:

... <li class="title">Categoria A  
<li class="sub-menu">  
<ul>  [*] .......[*] .......  [/list]
 
...
... <li class="title">Categoria N  
<li class="sub-menu">  
<ul>  [*] .......[*] .......  [/list]

Quindi N tag li con la classe "title" e al click si apre il "parent" dentro.
Cioè:

$('li.title a').click(function(e){   
/* Finding the drop down list that corresponds to the current section: */  
var subMenu = $(this).parent().next();   
/* Trovare il sotto menu che corrisponde alla voce cliccata */  
$('.sub-menu').not(subMenu).slideUp('slow');   
 subMenu.stop(false,true).slideToggle('slow');
})

Se io volessi avere una struttura così:

<h3>titolo A</h3>


testo testo ........</p>
<h3>titolo B</h3>


testo testo testo</p>
.....

Come dovrei modificare il codice sopra?
Cioè, c'è un modo di dire "espandi tutti i tag

che trovi subito dopo il tag h3 cliccato" e chiudi tutti gli altri?

Che sudata a spiegare questa cosa....... sono sicuro è una baggianata, intanto faccio prove.
Ciao!

[carlogh]

se ho capito bene, io farei così:

$('h3').click(function(e) {
   $('h3 + p').slideUp('fast');
   $(this).next('p').slideDown('fast');
});

in pratica funziona così:
cliccando su un h3 (che poi sarà immagino #nav h3 o qualcosa del genere, altrimenti si applica a tutti gli h3 della pagina),
vengono chiusi tutti i p adiacenti agli h3 (selettore di adiacenza +),
e viene aperto il p adiacente all'h3 cliccato (next('p')).

Mi sembra il metodo più veloce

[PazZII]

Originariamente inviato da carlogh
se ho capito bene, io farei così:

$('h3').click(function(e) {
   $('h3 + p').slideUp('fast');
   $(this).next('p').slideDown('fast');
});

in pratica funziona così:
cliccando su un h3 (che poi sarà immagino #nav h3 o qualcosa del genere, altrimenti si applica a tutti gli h3 della pagina),
vengono chiusi tutti i p adiacenti agli h3 (selettore di adiacenza +),
e viene aperto il p adiacente all'h3 cliccato (next('p')).

Mi sembra il metodo più veloce

Yumm mi sembra corretto.
Provo.
Grazie per adesso

[PazZII]

Originariamente inviato da carlogh
se ho capito bene, io farei così:

$('h3').click(function(e) {
   $('h3 + p').slideUp('fast');
   $(this).next('p').slideDown('fast');
});

in pratica funziona così:
cliccando su un h3 (che poi sarà immagino #nav h3 o qualcosa del genere, altrimenti si applica a tutti gli h3 della pagina),
vengono chiusi tutti i p adiacenti agli h3 (selettore di adiacenza +),
e viene aperto il p adiacente all'h3 cliccato (next('p')).

Mi sembra il metodo più veloce

Ci siamo quasi!!!
Stavo smanettando un pò ma ho problemi con questa strana select che non ho mai affrontato.
In pratica il tuo codice è perfetto se fra un H3 e il successivo c'è solo UN tag P in quanto al Click attiva il P adiacente all'H3 cliccato.
Ma se adiacente all'H3 ci stanno N tag p?

E si può evitare che se clicco su un H3 già espanso si ripeta l'effetto slideup/slidedown?

Intanto mi vado a studiare each().. forse è quello il modo?

[PazZII]

mmmm ho fatto così.
Non è elegante ma si può dire che funziona:

$(document).ready(function(){
	
		/* Nasconde tutto quello che trova dopo ogni<h3></h3> */
		$('#contenitoreMain h3').nextUntil('h3').hide();
		
		$('#contenitoreMain h3').click(function(e){
			/* Nasconde tutto quello che trova eventualmente aperto dopo ogni<h3></h3> */
			$('#contenitoreMain h3').nextUntil('h3').slideUp('fast');
			/* Espande tutto quello che trova dopo l'elemento <h3> cliccato fino al prossimo <h3> o alla fine del div */
			$(this).nextUntil('h3').slideDown('fast');
		})
		
	});

Quindi posso mettere qualsiasi tag html DOPO <h3>...</h3> e lui al click sull'H3 nasconde tutti per precauzione e poi espande qualsiasi tag successivo all'H3 cliccato... bò.. funziona.
Pareri?

[carlogh]

Originariamente inviato da PazZII
Ci siamo quasi!!!
Stavo smanettando un pò ma ho problemi con questa strana select che non ho mai affrontato.
In pratica il tuo codice è perfetto se fra un H3 e il successivo c'è solo UN tag P in quanto al Click attiva il P adiacente all'H3 cliccato.
Ma se adiacente all'H3 ci stanno N tag p?

E si può evitare che se clicco su un H3 già espanso si ripeta l'effetto slideup/slidedown?

Intanto mi vado a studiare each().. forse è quello il modo?

penso che tu possa usare nextUntil() anziché next(). Prova così:

$('h3').click(function(e) {
   $('h3').nextUntil('h3').slideUp('fast');
   $(this).nextUntil('h3').slideDown('fast');
});

in pratica:

al click di un h3,
vengono chiusi tutti gli elementi tra un h3 e l'altro (nextUntil('h3'))
e poi vengono aperti tutti gli elementi fratelli dell'h3 cliccato.

penso che funzioni, dai un'occhiata alla documentazione:

http://api.jquery.com/nextUntil/

fammi sapere!

[carlogh]

Originariamente inviato da PazZII
mmmm ho fatto così.
Non è elegante ma si può dire che funziona:

$(document).ready(function(){
	
		/* Nasconde tutto quello che trova dopo ogni<h3></h3> */
		$('#contenitoreMain h3').nextUntil('h3').hide();
		
		$('#contenitoreMain h3').click(function(e){
			/* Nasconde tutto quello che trova eventualmente aperto dopo ogni<h3></h3> */
			$('#contenitoreMain h3').nextUntil('h3').slideUp('fast');
			/* Espande tutto quello che trova dopo l'elemento <h3> cliccato fino al prossimo <h3> o alla fine del div */
			$(this).nextUntil('h3').slideDown('fast');
		})
		
	});

Quindi posso mettere qualsiasi tag html DOPO <h3>...</h3> e lui al click sull'H3 nasconde tutti per precauzione e poi espande qualsiasi tag successivo all'H3 cliccato... bò.. funziona.
Pareri?

azzo non mi ero mica accorto che avevi risposto abbiamo risposto praticamente insieme

[PazZII]

Perfetto!
Mi fa piacere di aver trovato una soluzione identica alla tua.
Comunque per la tua felicità ho aperto una discussione mooolto simile ma con draggable()

Si accettano suggerimenti mentre continuo a smanettare.
Ciao!