Accordination

by Dennis Betman

HTML

<div id="fixed">
    <div id="geenidee">
        <div id="accordion">
            <div class="group">
            <h3>Home</h3>
            <div>
                <p>
                    Change Name:<br/>
                    <input type="text" name="changename" />
                </p>
            </div>
            </div>
            <div class="group">
            <h3>News</h3>
            <div>
                <p>
                    Change Name:<br/>
                    <input type="text" name="changename" />
                </p>
            </div>
            </div>
        </div>
    </div>
</div> <!-- end of div fixed -->

CSS

body{
    margin: 0px;
}

#fixed{
    position: fixed;
    width: 250px;
    height: 100%;
    background: grey;
}

#geenidee{
    padding-top: 10px;
    width:200px;
    margin: 0px auto;
}

input{
    width: 150px;
    margin-left:-15px;
}

JavaScript

$(function() {
    $( "#accordion" ).accordion({
      heightStyle: "content",
      collapsible: true,
      header: "> div > h3"
    })
    .sortable({
      axis: "y",
      handle: "h3",
        stop: function( event, ui ) {
          // IE doesn't register the blur when sorting
          // so trigger focusout handlers to remove .ui-state-focus
          ui.item.children( "h3" ).triggerHandler( "focusout" );
        }
     });
  });