Up! Well, here two examples of code with the great jsbin.com service:
In the first example, I simply try to add navigation settings to accordion instance: http://jsbin.com/azapu If I add a sharp parameter to activated the second element: http://jsbin.com/azapu#second I've got nothing activated. In the second example, there is my ugly code that activate the current element (wich has the .ui-accordion-content-active class): http://jsbin.com/idalo so it works with a sharp navigation parameter: http://jsbin.com/idalo#second Any ideas for running navigation settings simply? Thanks. On 28 oct, 20:31, "Jeremy B." <[email protected]> wrote: > 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> > <p> > 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. > </p> > </div> > <h3><a href="#second">Section 2</a></h3> > <div> > <p> > 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. > </p> > </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> > <p>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.</p> > </div> > </div> > <div id="test2"> > <h3><a href="#test2">Section 2</a></h3> > <div> > <p>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. </p> > </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 -- 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.
