jQuery help

Ok, hier de snelle tutorial over hoe je dit doet (ik ga niet reageren op je code, omdat je het opzettelijk moeilijk maakt om te bekijken/debuggen. Als je reacties wil zet je maar even de relevante code niet op het eind van het jquery script, maar gewoon zoals de rest van de wereld dat ook doet, in een los bestandje.) Optimaliseren doe je maar als het script werkt.

1. Je moet een block structuur hebben die alsvolgd loopt:

Container block (blijft altijd visible)
 |-> header block (blijft altijd visible)
 `-> content block (toggled visible of invisible)

Een voorbeeld kan zijn (class names zijn discutabel):

<div class="containerToggleBlock">
  <div class="headerToggleBlock">
    Hier iets van een header - dit blijft staan
  </div>
  <div class="contentToggleBlock">
     Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Sed sodales. Pellentesque consequat elementum quam. Donec blandit. Vivamus suscipit rutrum magna..
   </div>
</div>

2. Javascript - jquery blocks
Je bind een toggle of slidetoggle aan het headerblock, en vervolgens zal het content block visible of invisble worden.

$(document).ready( function () { init(); } );

function init() {
    $('.headerToggleBlock').click(
      function () {  $(this).siblings().toggle(); }
    );
}

Alternatief: geanimeerd

$(document).ready( function () { init(); } );

function init() {
    $('.headerToggleBlock').click(
      // "normal" kan ook "fast", "slow" of tijd in ms zijn
      function () {  $(this).siblings().slideToggle("normal"); }
    );
}