JQuery: hiding/showing an element within an inactive tab

Question

I've got 3 tabs. Each of them have a div called optional, apart from other elements. optional is initially hidden using Javascript, I dun wanna use CSS ( this is so if js is disabled, the div won't be hidden at all ).

So I use this to hide optional

$(function(){ 
   $('#optional').hide();
});

Now, this works just fine on the first tab but won't hide on the next two tabs. They've all got the same code, no naming conflicts and no javascript errors reported.

Any idea what I'm doing wrong?

Answer 1

$(function(){ 
   $('div.optional').hide();
});

Classname instead of id, since IDs are required to be unique. By the DOM/JS, if not html.

---

Edited: to change ...('.optional')... to ...('div.optional')... which should reduce the time it takes the function to work (since it's looking through only one set of tags <div> rather than all of them, examining them for their class-name.