Hi,
I try to use jQuery UI accordion with the navigation option but I
can't make it work and I don't found much documentation...
Source jQuery UI documentation: "If set, looks for the anchor that
matches location.href and activates it. Great for href-based state-
saving. Use navigationFilter to implement your own matcher."
<div id="accordion">
<h3><a href="#first">Section 1</a></h3>
<div>
Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam.
Integer
ut neque. Vivamus nisi metus, molestie vel, gravida in,
condimentum sit
amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra
leo ut
odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque
vulputate.
</div>
<h3><a href="#second">Section 2</a></h3>
<div>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit
amet
purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis
porttitor
velit, faucibus interdum tellus libero ac justo. Vivamus non quam.
In
suscipit faucibus urna.
</div>
</div>
Javascript code:
<script type="text/javascript">
$(function() {
$("#accordion").accordion({
navigation: true
});
});
</script>
With the "#first" anchor, I want the first element became activated.
I've tested different solutions such as:
<div id="accordion">
<div id="test1">
<h3><a href="#test1">Section 1</a></h3>
<div>
Mauris mauris ante, blandit et, ultrices a, suscipit eget,
quam. Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi.
Proin viverra leo ut odio. Curabitur malesuada. Vestibulum a velit eu
ante scelerisque vulputate.
</div>
</div>
<div id="test2">
<h3><a href="#test2">Section 2</a></h3>
<div>
Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum
sit amet purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris
turpis porttitor velit, faucibus interdum tellus libero ac justo.
Vivamus non quam. In suscipit faucibus urna.
</div>
</div>
</div>
But nothing works...
So, I've found a temporary ugly solution for activating the element:
- with navigation option, ui-accordion.js added an "ui-accordion-
content-active" class ;
- with this CSS class I founded the tabindex element and activated it:
var index = $("#accordion").find(".ui-accordion-content-active").parent
('h3').attr('tabindex');
$("#accordion").accordion('activate', Math.abs(parseInt(index)));
I found this very ugly... So if I do something wrong or if you got a
better solution, it would be nice ;-)
Thanks
--