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.




      

Reply via email to