Amending existing script collapsible-list

Question

Evening.

I'm looking at this script collapsible-list and was hoping someone could help me amend it slightly.

There is a live demo on this page : HERE and I've created a JFiddle HERE

Currently when the page loads a all sections are fully expanded, is there any way to start the script with them collapsed ?

Is there anyway to only show one expanded section at a time ? ie: If A is shown and I click on B, then B should open and A should close.

How would I add a border around the entries ? So when closed nothing is shown only the header, but when expanded a 2px border is shown around the correct section ?

So far I've managed to get it to load with the headers collapsed by adding :

allElements.hide();

To :

        function init() {
            allElements = mainUl.find('> ul > li, ol > li');
            headers = getHeaders();

            allElements.hide();

            setHeadersClickHandler();
            setApi();
            if (options.search !== false) {
                setSearchField();
            }
        }

This works BUT to expand a header section I have to double click on it, not single.. any way to do it with a single click ?

I've tried to make it only show one header section at a time by adding the following :

var elem = $(this).next('.header')
$('.header').not(elem).hide();

To :

function expandHeader(header) {
return showListElements(findHeadersList(header).find('> li'))
.done(function() {
header.removeClass('collapsed');
var elem = $(this).next('.header')
$('.header').not(elem).hide();
});
}

But this just deleted all the headers when one was clicked !

I'm not sure how to add the border to the UL when expanded. I'd like it to look like this :

I hope someone can help me with this. Many Thanks

** UPDATE **

I've got the border appearing and hiding as the UL expands and collapses using :

    function collapseHeader(header) {
        return hideListElements(findHeadersList(header).find('> li'))
            .done(function() {
                 $(this).parent().css({"border-width":"0px"});
                header.addClass('collapsed');
            });
    }

    function expandHeader(header) {
        return showListElements(findHeadersList(header).find('> li'))
            .done(function() {
                $(this).parent().css({"border-width":"2px"});
                header.removeClass('collapsed');
            });
    }

However when I search if a section contains no matches the UL is closed but the border is still visible. Anyway around that ?