Using jQuery Expandables - Accordion style

by web5me

HTML

<script src="https://github.com/MarcDiethelm/jQuery-Expandable/raw/master/ui.expandable.js"></script>
<link rel="stylesheet" href="https://github.com/MarcDiethelm/jQuery-Expandable/raw/master/ui.expandable.css">
<div id="box-1" class="expandable">
     <div class="ui-expandable-title">Section 1</div>
     Form Stuff
 </div>
 
 <div id="box-2" class="expandable">
     <div class="ui-expandable-title">Section 2</div>
     Form Stuff
 </div>
 
 <div id="box-3" class="expandable">
     <div class="ui-expandable-title">Section 3</div>
     Form Stuff
 </div>

CSS

.ui-widget-header {
    border: 1px solid #ccc;
}

JavaScript

var formDivs = $(".expandable");

formDivs.expandable({
    //someConf: value,
    opening: function() {
        formDivs.not(this).expandable('close');
    }
});