Question

So I have some code that’s like this:

    <script type="text/javascript">
        $(document).ready(function() {
            $(".Hidden").hide();
            $("#Unlikely").hide();
            $(".Even").click(function(){
                jQuery(this).next(".Hidden").slideToggle(500);
            });
            $(".Odd").click(function(){
                jQuery(this).next(".Hidden").slideToggle(500);
            });
            $(".UnlikelyHeader").click(function(){
                jQuery(this).next("#Unlikely").slideToggle(500);  
            })
        });
    </script>

is the JSP

<div class="UnlikelyHeader">Unlikely to be called</div><br />

    <div id="Unlikely">
        --Stuff here
    </div>

The stuff with hidden / even / odd works. but I’m unable to make UnlikelyHeader drop down the “Unlikely” div which is directly below it. I think the “(this).next is wrong, but I’m not sure what else to use?

Answer 1

That’s because next element is a br element, why not using ID selector?

$(".UnlikelyHeader").click(function(){
    $("#Unlikely").slideToggle(500);  
})