How to rid of the "blinking" reloading effect of a Collapsible Menu?

My boss would like a collapsible side bar for our website, which I have managed to come up with one.. However, she finds it annoying during navigation (or when the page is being refreshed) the side bar keeps reloading, and thus having this quick motion of collapsing and expanding (the "blinking") effect. Would it be possible to rid of it while still retain the function of the collapsible/ expandable function of the side bar?

Link: http://2ddige.com/temps/Services/proteomics%202d_dige.html

PS: She would like the default in the expanded state, not collapsed state.

Code:
// Appear/Disappear
            $('#menu4 > li > a.expanded + ul').show();
            $('#menu4 > li > a').click(function() {
                       $(this).toggleClass('expanded').toggleClass('collapsed').parent().find('> ul').toggle();
            });
            $('#example4 .expand_all').click(function() {
                $('#menu4 > li >   a.collapsed').addClass('expanded').removeClass('collapsed').parent().find('> ul').show();
            });
            $('#example4 .collapse_all').click(function() {
                $('#menu4 > li > a.expanded').addClass('collapsed').removeClass('expanded').parent().find('> ul').hide();
            });

Solution

Remove the first line including .show() and either add this to your CSS:

#menu4 > li > a.expanded + ul {
    display: block;
}

or add this to each of those ul elements:

<ul style="display: block;">

What you are experiencing is known as a FOUC, though that wiki doesn't mention that a FOUC can also happen when styling elements with javascript on page load or domcontentloaded.