[jQuery] Need help with a toggle - works if I click twice!
My code:
<div class="categorytitle">Health Status or Disease</div>
<div class="topiccount">
54 Topics <span class="clicktoview">- Click To View</span>
</div>
</div>
<div class="topiclist">
<div class="twocols">
<ul>
<li style="display: list-item;"
class="checkboxline">
<input class="check" value="1"
name="topicid" id="topic_1" type="checkbox">
<label class="label" for="topic_1">Acute
Lung Injury</label>
</li>
<li style="display: list-item;"
class="checkboxline">
<input class="check" value="3"
name="topicid" id="topic_3" type="checkbox">
<label class="label"
for="topic_3">Agricultural Workers' Diseases</label>
</li>
</ul>
</div>
<div class="twocols">
<ul>
<li style="display: list-item;"
class="checkboxline">
<input class="check" value="1"
name="topicid" id="topic_2" type="checkbox">
<label class="label"
for="topic_2">Something</label>
</li>
<li style="display: list-item;"
class="checkboxline">
<input class="check" value="3"
name="topicid" id="topic_4" type="checkbox">
<label class="label"
for="topic_4">Something Else</label>
</li>
</ul>
</div>
</div>
My jQuery:
$('div.topiccategory').toggle(
function () {
$(this).next().children().children().show();
}, function () {
$(this).next().children().children('ul').children('li').children(':check
box').not(':checked').parent().toggle();
});
This works - but I have to click on the category title twice! Argh! :)
What am I doing wrong??? I've been tinkering around with it in Firebug
but getting nowhere fast.
Thanks!
Jim