Small but annoying problem

JavaScript
1

Hi to all, first post here. I have a big problem for me and prolly a small for you guys (and girls).

I simply want to

  1. hide all div
  2. after show only the next div to clicked element.

Heres is the HTML

<div id=“listMap”>

<p class=“titreRegion rivesudBtn”><a href=“#” onClick=“panToRegion(centreRiveSud);”>RIVE-SUD</a></p>
<div class=“rivesud panel”>
CONTENT
</div>

<p class=“titreRegion riveNordBtn”><a href=“#” onClick=“panToRegion(centreRiveSud);”>RIVE-SUD</a></p>
<div class=“riveNord panel”>
CONTENT
</div>

<p class=“titreRegion centreBtn”><a href=“#” onClick=“panToRegion(centreRiveSud);”>RIVE-SUD</a></p>
<div class=“centre panel”>
CONTENT
</div>

</div>

Here is the jQuery

$(“div#listMap p a”).click(function() {
$(“#listMap > div”).slideUp(“fast”);
// NONE OF THE FOLLOWING WORKS
//$(this).next().slideDown(“fast”);
//$(this).next(‘div’).slideDown(“fast”);
//$(this).next(‘.panel’).slideDown(“fast”);
//$(this).next().div().sldieDown(“fast”);
return false;
});

Any help appreciated. Thanks!

2

Since it is tied to your ‘a’ element, you need to get to the parent (‘p’) tag, then find the next div.panel.
As shown here: http://jsfiddle.net/cpradio/VSuWC/

3

Yup! Its working. Should have thought about it as i tried parent() at some times.

Thanks!