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<http://mc/compose?to=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. > > > >
