Jquery hide alleen divs in div

[baws]

Hallo,

Ik heb een div class = catgroep
met darin divs class = cats

de div ziet er als volgt uit (voorbeeld)

<div class="catgroep">
<b>Bad</b>
   <div class="cats" style="display: none;">
      Bad Overige<br>
      Bubbel Bad<br>
      Bad Kraan<br>
      Bad Wand<br>
      Ligbad<br>
      Vrijstaand Bad<br>
     <br>
  </div>
</div>

Dus Bad is eigenlijk de hoofdgroep.

Wat ik wil doen is dat als ik op bad klik de andere items in de class cats getoggeld worden standaard zijn alle cats items verdwenen

Ik heb
[js]
$(function () {
$(".cats").hide();
$(".catgroep").click(function()
{
$(this).children().toggle();
});
});
[/js]
maar wat er nu gebeurd is dat de titel (bad) verborgen word.

Hoe kan ik ervoor zorgen dat de titel altijd blijft staan.

Ik heb een voorbeeld gemaakt op :
http://jsfiddle.net/WUgwm/


edit

als ik er

$(this).children().css("border-bottom", "3px double red"); van maak dan heeft alleen de div die ik wil verbergen een border.
maar als ik van .css .hide() maak dan verbergt hij ook wat ik wil houden

 

[Milenko]

Het is lastig te zeggen, aangezien ik niet precies je HTML structuur kan zien. Volgende keer even je code tussen de code tags plaatsen .

Ik gok dat het iets is zoals onderstaande code:

function toggleCat() {
  $('.catgroep b').click(function () {
    $(this).find('.cats').toggle();
  });
}

UPDATE

Dit moet het worden:

$('.catgroep b').click(function () {
    $(this).parent().find('.cats').toggle();
});

 

[baws]

Ik heb hem gewijzigd in http://jsfiddle.net/WUgwm/3/ nu werkt het !