I am making a form with optional fieldsets. The idea is to dynamically
apply a style to the headings above only the optional fieldsets and
allow this "controller" style to expand and contract the "optional"
div below it on click. Here is a snippet of my markup:
**begin markup snippet**
...
<fieldset id="keyinfo">
<h2>Key Project Information</h2>
<label>Your Name</label><input />
<label>Project Name</label><input />
<label>Deadline Date</label><input />
<!-- end of keyinfo --></fieldset>
<fieldset id="otherinfo">
<h2>Additional Information</h2>
<div class="optional">
<label>Your Dog's Name</label><input />
<label>Another Field</label><input />
<!-- end of optional --></div>
<!-- end of otherinfo --></fieldset>
<fieldset id="nextstep">
...
**end markup snippet**
and here is my jQuery code
**begin code**
$(document).ready(function(){
// hide all elements tagged as optional
// add a class of controller (that has a plus sign, indicating
expandable)
$(".optional").hide().prev().addClass("controller");
// when user clicks on controller class toggle it to "open" or not
(this changes + to -)
// and the next optional class below it is triggered to open or close
$(".controller").click(function(){
$(this).toggleClass("open").next(".optional").slideToggle("slow");
});
});
**end code**
OK, here is the weird thing. This works fine on Firefox 3.0.6 and IE7
on Windows if I use "jquery-1.2.6.min.js" but it breaks only on
Firefox if I use "jquery-1.3.2.min.js".. on Firefox the problem is
that the .slideToggle() doesn't seem to ever recognize that the
"optional" div is open.. it keeps sliding open but not closed.. why is
this happening? I have gone through every possible iteration on
removing parts of the code and rebuilding and I still have no inkling
as to what I've done wrong here.
I'm trying to use as little markup as possible and make sure it
degrades gracefully. Please be gentle and try to explain the "why" of
what the correct logic is; I went to art school! Thanks in advance for
your help.
