jQuery showhide

Ik wil met blokken gaan werken, ieder blok heeft een kopje (een h1). Ik wil dat als er op de h1 geklikt wordt, dat dan het blok wordt verborgen. Ik zal dit misschien iets duidelijker maken met een voorbeeld van hoe ik denk dat ik het beste de HTML code kan opbouwen.

<div class="showhide">
  <h1>Title</h1>
  <div class="content">
    content hier van het blok
  </div>
</div>

De CSS wil ik zo doen:

div.showhide h1 {
	background: url(); /* voor een pijltje dat de status van het blok aan geeft (open of dicht) */
}

div.hidden h1 {
	background: url(); /* nu een omgekeerd pijltje */
}

div.hidden div.content {
	display: none;
}

Valt ie een beetje? Dus als div.showhide alleen de class showhide heeft, ie div.content zichtbaar, als die ook nog de class hidden heeft, is ie verborgen.

Nu wil ik dus dat als er op div.showhide(.hidden) h1 geklikt wordt, de parent-div (div.showhide) de class hidden toggled. Ik gebruik jQuery, dus wat is de makkelijkste manier om dit te doen? Thx. Thomas.