<section class="content">
    <div class="row">
        <div class="col-sm-12">
            <div class="tabbable">
                <div class="tab-content no-border padding-24">
                    <div class="tab-pane fade in active" id="faq-tab-1">
                        <div class="space-8"></div>
                        <div class="panel-group accordion-style1 accordion-style2" id="faq-list-1">
                            <div class="tool-bar margin-bottom margintopnew20">
                                <?php echo $this->partial('middle-links.phtml'); ?>
                            </div>
                            <span class="checkbox_error"></span>
                            <div class="panel panel-default">
                                <div class="panel-headingnew"> View/Update Records </div>
                                <div id="faq-1-3" class="panel-collapse collapse in" aria-expanded="false" >
                                    <div class="box">
                                        <div id="button_top_bar"></div>
                                        <div class="box-body table-responsive listing-data">
                                            <?php echo $this->partial('menu-listing.phtml'); ?>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <br>
        </div>
    </div>
</section>

<script>

$(document).ready(function()
{

    var updateOutput = function(e)
    {
        var list   = e.length ? e : $(e.target),
            output = list.data('output');
        if (window.JSON) {
            output.val(window.JSON.stringify(list.nestable('serialize')));//, null, 2));
        } else {
            output.val('JSON browser support required for this demo.');
        }
    };

    // activate Nestable for list 1
    $('#nestable').nestable({
        group: 1
    })
    .on('change', updateOutput);



    // output initial serialised data
    updateOutput($('#nestable').data('output', $('#nestable-output')));

    $('#nestable-menu').on('click', function(e)
    {
        var target = $(e.target),
            action = target.data('action');
        if (action === 'expand-all') {
            $('.dd').nestable('expandAll');
        }
        if (action === 'collapse-all') {
            $('.dd').nestable('collapseAll');
        }
    });


});
</script>