Blocked Collapsible - Event based

by nirmaljpatel

HTML

<script src="http://malsup.github.io/jquery.blockUI.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<div class='accordion'>
     <h3>2012</h3>

    <div class='inneraccordion'>
         <h3>October 2012</h3>

        <div>
            <ol>
                <li>October 5, 2012</li>
                <li>October 1, 2012</li>
            </ol>
            <div>
                <span>A Text field: </span>
                <input type='text' />
            </div>
            <div>
                <span>A Drop Down: </span>
                <select>
                    <option value="volvo">Volvo</option>
                    <option value="saab">Saab</option>
                    <option value="mercedes">Mercedes</option>
                    <option value="audi">Audi</option>
                </select>
            </div>
        </div>
         <h3>September 2012</h3>

        <div>
            <ol>
                <li>September 30, 2012</li>
                <li>September 29, 2012</li>
                <li>September 29, 2012</li>
                <li>September 26, 2012</li>
                <li>September 26, 2012</li>
                <li>September 25, 2012</li>
                <li>September 24, 2012</li>
                <li>September 19, 2012</li>
                <li>September 19, 2012</li>
                <li>September 19, 2012</li>
                <li>September 19, 2012</li>
                <li>September 19, 2012</li>
                <li>September 11, 2012</li>
                <li>September 5, 2012</li>
            </ol>
        </div>
         <h3>August 2012</h3>

        <div>
            <ol>
                <li>August 19, 2012</li>
                <li>August 17, 2012</li>
                <li>August 9, 2012</li>
                <li>August 4, 2012</li>
                <li>August 4, 2012</li>
                <li>August 4, 2012</li>
                <li>August 4,...

JavaScript

$(document).ready(function () {
    $('div.accordion, div.inneraccordion').accordion({
        autoHeight: true,
        heightStyle: 'content',
        collapsible: true,
        active: false
    });
});

//Bind to accordionactivate event - fired after an accordion expands/collapses - enable/disable sibling accordion panels here based on if a panel is collapsing/expanding.
$("div.accordion, div.inneraccordion").on("accordionactivate", function (event, ui) {
    console.log("accordionactivate...");
    console.time("accordionactivate");

    event.stopPropagation(); //Do not let event trigger on multiple accordians

    if (ui.oldHeader.length === 0 && ui.oldPanel.length === 0) {
        //console.log("...Expanding:", ui.newHeader[0].innerText);

        $(ui.newHeader[0]).parent().trigger("block");
        //$(ui.newHeader[0]).parent().children('h3').trigger("block");
        //$(ui.newHeader[0]).parent().children('h3:not(".ui-accordion-header-active")').trigger("block");
    } else if (ui.newHeader.length === 0 && ui.newPanel.length === 0) {
        console.log("...Collapsing:", ui.oldHeader[0].innerText);
        $(ui.oldHeader[0]).parent().trigger("unblock");
        //$(ui.oldHeader[0]).parent().children('h3').trigger("unblock");
        //$(ui.oldHeader[0]).parent().children('h3:not(".ui-accordion-header-active")').trigger("unblock");
    }
    console.timeEnd("accordionactivate");
});

var divLvlBlockHdlr = function (event, ui) {
    //console.time("divLvlBlockHdrl");
    $(this).children('h3:not(".ui-accordion-header-active")').block({
            message: ''
        });
    //console.timeEnd("divLvlBlockHdrl");
};
var divLvlUnblockHdlr = function (event, ui) {
    //console.time("divLvlUnblockHdlr");
    $(this).children('h3:not(".ui-accordion-header-active")').unblock();
    //console.timeEnd("divLvlUnblockHdlr");
};

var h3LvlBlockHdlr = function (event, ui) {
    event.stopPropagation();
    //console.time("h3LvlBlockHdlr");
    $(this).block({
     ...