I'm trying to implement accordion menu for quick launch ( as in http://borderingdotnet.blogspot.com/2013/04/accordion-left-navigation-for.html ), but it behaves very weird. Sometimes it works correctly, but sometimes after closing the browser and starting it again it does not. I can open the console and debug it (IE) and it seems to work fine... except that there are no results on the page, nothing changes. I've tried replicating this in FF, and the problem initially started in a similar way, but after debugging it somehow started to work... and now it is working, even after refreshing page or restarting browser. The weirdest thing is that when I add alert with whatever in the beginning of the script, it's always working, as if alert would somehow force the quick launch to apply changes.

Any ideas? This is a modified standard master page, put into module and on-premise package.

EDIT: Relevant script

   <script type="text/javascript">
    $(function () {
        /*set dynamic css logic*/

        var em = document.location.pathname.split('/')[1]
        if ( em != 'EmployeeManual') {
            return false;
        var table = document.getElementById('scriptWPQ2');
        if (table != null) {
            table.setAttribute('style', 'position: absolute; top: 210px; left: 410px; margin: -100px 0 0 -200px;');
        var a = $('#sideNavBox .menu-item.selected');

        if (a.length) {
            //propagates the selected class, up the three.
            $('#sideNavBox .menu-item.selected').parents('li.static').addClass('selected');

            //collapses top siblings of selected branch
            $('#sideNavBox .menu-item.selected').parents('li.static').last().siblings()
             .find('> ul').hide();
        else {
            $('#sideNavBox .root.static > li.static > ul').hide();
        var b = $('#sideNavBox .root.static > li.static');
        /*set accordion effect*/
        b.each(function () {
            if ($(this).find('ul').length) {
                $(this).addClass('father').click(function () {
                    //if ($(this).children('ul').css('display') != 'none') {
                    //    $(this).removeClass('selected').children('ul').slideUp();
                    //else {


                    /*added: stop event propagation to link nodes*/
                    $('a.static').click(function (event) {

                    return false;

I have also tried to wrap the code in ExecuteOrDelayUntilScriptLoaded but the result was the same.

  • This seems like loading issue of js files or you are using window.load or document.ready event which does not guarantee that it is executed after loading SP JS files. Post relevant JS code to provide a definite answer. Feb 3, 2015 at 12:08

2 Answers 2


Is Minimal Download Strategy turned on? If so you have to do all sorts of evil typename registration. Read Hugh Woods recent blogs on using JavaScript with MDS.


SharePoint often loads things asynchronous. When your code runs, the content of the page may be not there. This explains why sometimes it works and sometimes nothing happens.

Please use the provided array _spBodyOnLoadFunctionNames:

function onloadScript() {
    // Place the content of your anonymous function here

// Run the function if SharePoint DOM and Object Model is ready

When the DOM is ready, SharePoint itself will run each function, whoose names are in the array. It's the SharePoint equivalent of something like $(document).ready().

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.