Question

So I have a string of Jquery stuff and I’m not sure why one part isn’t working.

I have a structure like this

<div id="wrapper">
    <span class="UnlikelyHeader"> Title Here</span>
    <div id="unlikely">
        <div class="blah"></div>
        <div class="blah"></div>
        <div class="blah"></div>
    </div>

Its my goal to make the div “Unlikely” hidden by default, and to use a slide toggle when you click on the span. Here’s what I have for code thus far (Note, the hidden / odd/ even are the working implementation of this)

        jQuery(document).ready(function() {
            jQuery(".Hidden").hide();
            jQuery("#Unlikely.hide()");
            jQuery(".Even").click(function()
            {
                jQuery(this).next(".Hidden").slideToggle(500);
            });
            jQuery(".Odd").click(function()
            {
                jQuery(this).next(".Hidden").slideToggle(500);
            });
            jQuery(".UnlikelyHeader").click(function()
            {
                jQuery(this).next("#Unlikely").slideToggle(500);
            });
        });

Also note: I’ve tried using #Unlikely.children().hide() and other methods to hide the stuff that I don’t want displayed by default.

Answer 1

I’m a big fan of doing this instead –

$('.UnlikelyHeader').click(function() {
 $('#unlikely').slideDown(500);   
});

and giving it the property of display:none in the CSS.

Working Example – http://jsfiddle.net/ne7MU/ (without toggle)
http://jsfiddle.net/ne7MU/1/ (with toggle)

Hope my interpretation is correct….