Question

In given below link when we refresh our page it briefly shows the expanded version before it collapses on its own. Is there a way to have it immediately be collapsed?

http://new.cgwealth.com/staff

Below are JS Code links:
http://new.cgwealth.com/pages/js/jquery-1.7.2.min.js

http://new.cgwealth.com/pages/js/accordion-jquery-ui.min.js

    <script type="text/Javascript">
        $(document).ready(function () {
            $(".accordion").accordion({
                autoHeight: false,
                navigation: false,
                collapsible: true,
                clearStyle: true
            });
        });
     </script>

CSS link: http://new.cgwealth.com/pages/pages/css/accordion.css

So i want to hide all the data until my accordion functionality works.

Thanks in advance

Answer 1

i had the same question in my last project, but i have no idea about that. Then i use a very ugly method to fix this. When i load data from my server, i add class named ‘hidden'(css:display:none), and it had a effort that all data, just like text or images, all hide. And after all data loaded, i call jquery function accordion and remove class ‘hidden’.
So i use this method to fix. Maybe it is valid for you.