Slidetoggle script doesnt toggle

Question

I have a toggle slide which does not work. Spend hours trying/learning to edit and rewrite this thing, but somehow the visbible and inviseble slidetoggle doesnt work.

Could someone please help me with the js script: SEE THE FIDDLE

JS:

$('.header .ullie').hide();

  $('.header h2 a').click(function() {
  $(".header h2").not(this).next(".header .ullie").slideUp("slow");
  $(this).next(".header .ullie").slideToggle("slow");
  return false;
});

$('.header h3 a').click(function() {
  $(".header h3").not(this).next(".header .ullie").slideUp("slow");
  $(this).next(".header .ullie").slideToggle("slow");
  return false;
});

HTML:

<div id="foldercontents">
<ul class="ullie">
<li class="header">
<h2><a href="javascript:void(0);">testbutton</a></h2>
<ul class="ullie">
    <li class="foldercontent">
        <h3>title</h3>
        <ul class="ullie"><li>row 1</li></ul> 
 </li></ul>
 </li>

 <!-- second, duplicated from first -->
 <li class="header">
<h2><a href="javascript:void(0);">testbutton2</a></h2>
<ul class="ullie">
    <li class="foldercontent">
        <h3>title</h3>
        <ul class="ullie"><li>row 2</li></ul> 
 </li></ul>
 </li>

</ul>
</div>         

SEE THE FIDDLE *ADDED JQUERY LIBRARY

Answer 1

I assume you're looking for something like this

$('ul li ul').hide();

$('.header > * > a, .foldercontent > * > a').click(function () {
    $(this).parent().siblings().slideToggle("slow");
});

You could also use margin:0; padding:0; to prevent the jumping instead of overflow:hidden, but that's up to you

Also note that you don't need the <a> tags, you could apply them to just the headers themselves if you'd like to