jQuery-Page not loading correctly

Question

I recently used accordion jquery to help me expand/collapse content ( like a drop-down menu )..I used this script and placed it in the <body>

Script:

jQuery(document).ready(function($)
{
                    $("#accordions-727.accordions").accordion({
                            active: "",
                            event: "click",
                            collapsible: true,
                            heightStyle: "content",
                            animated: "swing",
})
                    })

The script is working fine but the page is not loading correctly..When I view or refresh the page, all the contents inside the drop-down menu becomes visible but once the page finishes loading everything becomes fine..Now how can I fix this?..Should I place the script in the <head>?

The console fires some message to you? Do you have more details? — RPichioli, Oct 07 '16 at 23:53
I thing I should put the script in so it loads first..What do you think? — Stew, Oct 07 '16 at 23:58
Well, I guess you should try to put it in and i see no need for $ argument in the ready call. — RPichioli, Oct 07 '16 at 23:59
This is using jQueryUI accordion implicitly, take a look in this API documentation: http://api.jqueryui.com/accordion/ ... You have a wrong attribute, you have to use animate in place of animated — RPichioli, Oct 08 '16 at 00:02

score 0 · Answer 1 · answered Oct 08 '16 at 00:35

0

This is using jQueryUI accordion implicitly @Stew.

You have a wrong attribute in your accordion setup code, use the animate in place of animated.

Take a look in this API documentation: http://api.jqueryui.com/accordion

And it's the original component demonstration: http://jqueryui.com/accordion/

I suggest you to take a look in your jQuery files too, if they are OK and in the correct order (in <header> section).

Another point is to put your JavaScript in <header> section of your HTML and be sure you have no conflict or using older jQuery files versions than the component needs.

Hope it helps.

answered Oct 08 '16 at 00:35

RPichioli

3,245
2
25
29

Wont putting the script in the
affect page performance?
– Stew Oct 08 '16 at 10:31
People say that JS in bottom is more performatic, Yahoo explain about it in their "best practices" topic: https://developer.yahoo.com/performance/rules.html ... There's some topics about put JS before the
or inside
in stack overflow too, take a look: http://stackoverflow.com/questions/196702/where-to-place-javascript-in-a-html-file and http://stackoverflow.com/questions/10994335/javascript-head-body-or-jquery
– RPichioli Oct 10 '16 at 16:09
Can you reproduce the problem in a running fiddle? – RPichioli Oct 10 '16 at 18:38
Not sure how to do that – Stew Oct 10 '16 at 18:49
You can add a snippet in your question and make it runnable, or using https://jsfiddle.net/ and showing us the URL to access the program. – RPichioli Oct 10 '16 at 18:57

jQuery-Page not loading correctly

1 Answers1