Blocked Collapsible

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().children('h3:not(".ui-accordion-header-active")').block({
            message: ''
        });
    } else if (ui.newHeader.length === 0 && ui.newPanel.length === 0) {
        console.log("...Collapsing:", ui.oldHeader[0].innerText);
        $(ui.oldHeader[0]).parent().children('h3:not(".ui-accordion-header-active")').unblock();
    }
    console.timeEnd("accordionactivate");
});

//Bind to accordianbeforeactivate event - fired before an accordion panel expands/collapses - can return false here to prevent an accordion panel from acting
$("div.accordion, div.inneraccordion").on("accordionbeforeactivate", function (event, ui) {
    console.log("accordionbeforeactivate");
    event.stopPropagation(); //Do not let event trigger on multiple accordians

    if (ui.newHeader[0] && $(ui.newHeader[0]).find('div.blockUI').length) {
        console.log('...Click on a disabled accordion. Return false.');
        return false;
    }
});

var createNewAccordion = function () {
    console.log("Creating new accordion");
    var newDiv = "<h3>Q4 New Question</h3><div>New Content</div>";
    $('div.accordion').append(newDiv);
    //$('div.accordion').accordion("refresh");
};
//Test to add an accordion...