Have you tried using .hide() and .show() instead of addClass? Less
code (both JavaScript and CSS). Unless the class 'show' has more than
just "display: inline"?
On Jul 12, 1:15 pm, stef <[EMAIL PROTECTED]> wrote:
> Im using the code below to display / hide form fields depending on
> what value is selected from a drop down list (id='category'). the
> optional form fields are all hidden by default when DOM is ready,
> using
>
> $(document).ready(function() {
> $("#dimensions").addClass("hidden")
> $("#size").addClass("hidden")
> $("#language").addClass("hidden")
> $("#inthebox").addClass("hidden")
> $("#color").addClass("hidden")
>
> });
>
> when i select "games", the p's with id 'dimensions' and 'inthebox'
> appear - so far so good. when i then select "accessoires",
> 'dimensions' and 'inthebox' should get hidden by adding the class
> 'hidden' (.hidden{display:none;}) - but this never works! any ideas
> why? firebug shows no errors ...
>
> $(document).ready(function()
> {
> $("#category").change( function()
> {
> if ($("#category").val() == "games")
> {
> $("#dimensions").addClass("show")
> $("#inthebox").addClass("show")
>
> }
>
> else if ($("#category").val() == "accessoires")
> {
> $("#dimensions").addClass("hidden")
> $("#inthebox").addClass("hidden")
>
> }
> });
>
> });
