yep, took me a while to realize that :) Implemented the extra layer of divs and its working great!
Thank you so much! UL-LIs was for the tabs above, not involved, my mistake :) --- On Fri, 5/15/09, Richard D. Worth <rdwo...@gmail.com> wrote: From: Richard D. Worth <rdwo...@gmail.com> Subject: [jQuery] Re: Sortable accordion-like widget To: jquery-en@googlegroups.com Date: Friday, May 15, 2009, 2:04 PM What UI-LI objects? Your sample code (which I added an extra div level to) only has DIVs and H3s. - Richard On Fri, May 15, 2009 at 2:21 PM, Danny Nolan <danny_no...@yahoo.co.uk> wrote: Almost, I found it worked almost, except for the fact that the sortable affected only the UL-LI objects, the contents were static. How to get past that? --- On Fri, 5/15/09, Richard D. Worth <rdwo...@gmail.com> wrote: From: Richard D. Worth <rdwo...@gmail.com> Subject: [jQuery] Re: Sortable accordion-like widget To: jquery-en@googlegroups.com Date: Friday, May 15, 2009, 10:51 AM Sure, here you go: http://jsbin.com/aqeca You can edit this example here: http://jsbin.com/aqeca/edit It's not perfect, since when you sort one, it also toggles it, but it's a start. - Richard On Fri, May 15, 2009 at 10:19 AM, Danny Nolan <danny_no...@yahoo.co.uk> wrote: Example? Im very new to jQuery, the old code was partially provided by someone else with a few edits, so not sure how to create that new level you was talking about. --- On Thu, 5/14/09, Richard D. Worth <rdwo...@gmail.com> wrote: From: Richard D. Worth <rdwo...@gmail.com> Subject: [jQuery] Re: Sortable accordion-like widget To: jquery-en@googlegroups.com Date: Thursday, May 14, 2009, 10:12 PM You'll need to add an extra level: section divs containing each related h3 and content div. Then you can call .sortable() the main div#accordion1 - Richard On Thu, May 14, 2009 at 9:38 PM, DanN <danny_no...@yahoo.co.uk> wrote: Got this coded, its an accordion like tool. It functions just how I need it, except id love to make it sortable. Anyone help with the code update? jQuery : $(function() { $("#accordion1").addClass("ui-accordion ui-widget ui-helper-reset") .find("h3") .addClass("ui-accordion-header ui-helper-reset ui-state-default ui- corner-top ui-corner-bottom") .prepend('<span class="ui-icon ui-icon-triangle-1-e"/>') .hover(function() { $(this).addClass("ui-state-hover"); }, function() { $(this).removeClass("ui-state-hover"); }) .click(function() { $(this).toggleClass("ui-accordion-header-active").toggleClass("ui- state-active") .toggleClass("ui-state-default").toggleClass("ui-corner-bottom") .find("> .ui-icon").toggleClass("ui-icon-triangle-1-e").toggleClass ("ui-icon-triangle-1-s") .end().next().toggleClass("ui-accordion-content-active").toggle(); return false; }) .next().addClass("ui-accordion-content ui-helper-reset ui-widget- content ui-corner-bottom").hide(); }) HTML: <div id="accordion1"> <h3><a href="#">DRAW2</a></h3> <div> CONTENT </div> <h3><a href="#">DRAW2</a></h3> <div> CONTENT </div> </div> Help appreciated in advance.
