jquery tabs sortable order cookie

I would like to create a cookie that remembers the order of my jquery tabs. How do I achieve that? I saw that you can create a cookie as well but I really don't know where to begin.

<script>
    $(function() {
        $( "#tabs" ).tabs().find( ".ui-tabs-nav" ).sortable({ axis: "x" });
    });
    </script>


<div id="tabs">
    <ul&开发者_运维技巧gt;
        <li><a href="#tabs-1">Nunc tincidunt</a></li>
        <li><a href="#tabs-2">Proin dolor</a></li>
        <li><a href="#tabs-3">Aenean lacinia</a></li>
    </ul>

I apologize, this is maybe not exactly the markup you were lookin for but is a great start!

LOOK AT THIS EXAMPLE I CREATED:
JSFiddle - COOKIES DEMO (Refresh the page after any change!!)

Use for Ex this HTML:

<div id="menu_holder">

    <div class="menu">
        <h2 class="button" id="button1">Menu title 1</h2>
        <ul class="list list1">
            <li>List 1</li>
            <li>List 2</li>
            <li>List 3</li>
        </ul>
    </div>

    <div class="menu">
        <h2 class="button" id="button2">Menu title 2</h2>
        <ul class="list list2">
            <li>List 1</li>
            <li>List 2</li>
            <li>List 3</li>
        </ul>
    </div>

    <div class="menu">
        <h2 class="button" id="button3">Menu title 3</h2>
        <ul class="list list3">
            <li>List 1</li>
            <li>List 2</li>
            <li>List 3</li>
        </ul>
    </div>

</div>

DOWNLOAD THIS jQuery COOKIES plugin --> HERE!

And here is the jQuery script I used for the demo:

$(document).ready(function(){
    $("ul.list").hide();        //Hide all

    $('h2.button').each(function(){                       // For each button
        if  ($.cookie( $(this).attr("id") ) == 'open')    // wich cookie value...
        {                                                 // is equal to the button ID
            $(this).next().show();                        // ...show next element (ul)
            $(this).addClass('opened');                    // and add to this button a class 'opened'
        }
    });

    $("h2.button").click(function(){                    // ON CLICK:

        $(this).toggleClass('opened');                    // toggle class.

        if ( $(this).hasClass('opened') )                
        {
        $.cookie( $(this).attr("id") , 'open' , {expires: 1} );
        }
        else
        {
        $.cookie( $(this).attr("id") , null , {expires: 1} );                
        };

        $(this).next().slideToggle(800);
    });
});

To see how cookies are handled, install Firebug and his Cookies plugin!
Click the buttons and see the response.

Leave a comment for any question!