stef 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")
}
});
});
Stef, maybe that is because the class "show" overrules "hidden". You
need to remove "show" before adding "hidden".
$("#dimensions").removeClass("show").addClass("hidden");
etc.
A few more things to improve performance and code size: You should also
group your selectors, like:
$("#dimensions, #size, #language, #inthebox, #color").addClass("hidden");
$("#dimensions, #inthebox").addClass("show");
Inside the change handler you don't need to query $("#category") again,
you can access it via "this":
$("#category").change(function() {
var value = this.value;
if (value == "games") {
...
} else if (value == "accessoires") {
...
}
});
--Klaus
