CODEWITHSUNDEEP
jqueryhtmlconditional-statementsshow-hide
Aaron
Aaron

Reputation: 541

JQuery "$('div').hide() and .show" not working for a certain div?

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!

Upvotes: 0

Views: 8318

Answers (2)

vzwick
vzwick

Reputation: 11044

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.

Upvotes: 2

Raghav
Raghav

Reputation: 1064

The divs with id 2 and 3 are simple divs with just image. The top level (i.e) only the div2 and div3 are shown or hidden based on the selection.

In the div 1, you have a number of inner elements which are also set to display:none because you are using a generic $('div').hide();

Always use the id or class selector while selecting elements. Using generic statements should be avoided

Upvotes: 2

Related Questions