I am running into a variety of difficulties attempting to use the
accordion plugin to enhance a form.
What I would like to write is:
<form>
<fieldset>
<legend>
<a href="#token">Heading</a>
</legend>
<fieldset id="token">
...form section...
</fieldset>
</fieldset>
</form>
To effectively style form legends, it's necessary to wrap the content
in another element (and display:block if it's not already). Normally
I'd do this with the link (which is multipurpose here), but these
selectors did not work:
$("form").accordion({header:'legend > a'});
I also determined that accordion would not recognize a fieldset as a
valid content container, only a division. So this markup wouldn't
work at all.
Next I tried:
<form>
<fieldset>
<legend>
<a href="#token" class="header">Heading</a>
</legend>
<div id="token">
...form section...
</div>
</fieldset>
</form>
On this attempt, the header would show the accordion theme and toggle
upon clicking, but the content in the following div would be
completely unaffected -- it would simply stay visible at all times and
was unskinned.
Next I tried this:
<form>
<fieldset>
<legend>
<h2>
<a href="#token">Heading</a>
</h2>
</legend>
<div id="token">
...form section...
</div>
</fieldset>
</form>
While this was not ideal, it worked...in Firefox.
However, in IE, the accordion theme is applied to both the header and
content, but the content does not show/hide -- it simply appears
inline as in a normal document.
I've obviously already moved far past what I would prefer in terms of
form markup. Removing the legends allows accordion to work in IE.
However, I am loathe to do that.
Am I making any errors or overlooking any alternatives that would
allow relatively uncluttered semantic form markup to be used with the
accordion plugin? Is there any way to suggest this to the creator?
I'd take a stab at it myself, but I am simply not at that level with
javascript or jQuery.
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"jQuery UI" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to
[email protected]
For more options, visit this group at
http://groups.google.com/group/jquery-ui?hl=en
-~----------~----~----~----~------~----~------~--~---
