Jquery not.(this)

Skall göra en enkel "accordion-meny" med jQuery och där jag vill att innehåll skall visas under respektive länk när man klickar på dem.

Html:

<div id="retailers">
<div class="retailers_section">
<p><a href="#">Land 1</a></p>
<ul>
<li><a href="#">Länk 1</a></li>
<li><a href="#">Länk 2</a></li>
</ul>
</div>
<div class="retailers_section">
<p><a href="#">Land 2</a></p>
<ul>
<li><a href="#">Länk 1</a></li>
<li><a href="#">Länk 2</a></li>
</ul>
</div>
<div class="retailers_section">
<p><a href="#">Land 3</a></p>
<ul>
<li><a href="#">Länk 1</a></li>
<li><a href="#">Länk 2</a></li>
</ul>
</div>

jQuery:

<script type="text/javascript">
$(function() {
  $('.retailers_section ul').hide();
  $('.retailers_section a').click(function() {
    $(this).parent('.retailers_section p').next('ul').slideDown('normal');
    $('.retailers_section p').next('ul').not(this).slideUp('slow');
  });
});
</script>

Det är ju nåt fel med .not(this) i min kod för nu "slidar" innehållet ner när man klickar på länken o sen direkt upp igen. Hur skall jag använda .not(this) så att det blir rätt?

hämta ut hela kollektionen och sen kör .not()

.next() hämtar nästa element ul element, och this kommer ju aldrig vara ett ul element då det är ett a-element.

Okej jag är inte riktigt med på hur du menar med hämta ut hela kollektionen först.. :S Är det nåt mer är .not() jag ska ändra på?

Hela koden känns som det kommer ge dig problem, du hämtar ut alla a-element, även "Länk 1, länk 2" osv, vilket jag gissar på att de skall skicka dig till en riktig sida?

$(function() {
	var
		retailSection = $('.retailers_section'),
		rsUl = retailSection.find('ul').hide(),
		rsA  = retailSection.find('p>a').click(function() {
			var ignore = $(this).parent().next().slideDown('normal');
			rsUl.not(ignore).slideUp('slow');
			return false;
		});
});

om du aldrig byter HTML struktur.

test: http://jsbin.com/obiqo/

Länkarna i varje <ul> skall gå till riktiga sidor ja, men de skall också vara lite text i varje <li>-element.

Jag har använt den här tutorialn:

http://www.youtube.com/watch?v=qBh_lMO_SDM

Jag fick göra om den lite så den skulle passa mig men de blev ju inte riktigt rätt..

Din lösning funka skitbra! En fråga bara, gör det något om jag har href="#" på länkarna inuti <p>-taggarna? dom ska ju inte gå nånstans egentligen utan bara visa innehållet under när man klickar.

nej, och det hade inte spelat någon roll, jag är sån som vill att länkar skall ta mig någonstans, men det är spelar ingen roll, den kan ta dig till google.com om det skall vara så, eftersom det kör en return false på click eventet som stoppar den att gå till vad den än står att den skall gå till.

Okej! :)

En sista fråga, om jag skall göra så att om jag t ex klickar på Land 1 en gång så visas innehållet och sen klickar jag på Land 1 igen så döljs innehållet med en slideUp, skall jag då köra en if-sats på det eller? Jag gjorde ett försök på det men det gick ju sådär...

byt ut slideDown till slideToggle...

Hehe ok! Tack tack! :)