Question

I’m having a minor issue. I’ve got the jQuery hide() and show() functions working well on form selection values for normal <div> elements, but I have one <div> element (the first one) with some code that doesn’t display when it’s selected.

Here’s the link for an example: http://www.shmoggo.com/3/diff.html

and here’s the code: http://www.shmoggo.com/3/diff.txt (sorry, it was too long to create a code block)

Any advice at all would be greatly appreciated.

Thanks!

Answer 1

Your div with id="1" contains another div which is hidden by the generic $('div').hide() call – and not shown again ever after.

Also, nesting multiple $(document).ready() calls is unnecessary.

Try this:

$(document).ready(function(){
    $("#dd").change(function(){
        var selected= $("#dd option:selected").data('size');
        $('div').hide();
        $div_to_show = $('#'+ selected); // cache element for better performance
        $div_to_show.show();
        $('div', $div_to_show).show(); // show divs nested below current div as well
    });

    $('div').hide();
});

Edit: Also, quote @bobince:

Also note that purely-numeric IDs are invalid in the HTML4 doctype you’re using (and should generally be avoided for compatibility reasons)

You should absolutely listen to that.