My JavaScript won't load in my WordPress HTML file?
Question
I am trying to run some simple JavaScript on one page of my WordPress site as a test, but it won't load.
An example of the code working correctly can be found at http://fiddle.jshell.net/psflannery/XAxWv/ .
<div class="acord">
<h3>Summer</h3>
<div class="acorda">
<h3>test1</h3>
<div>test1cont</div>
<h3>test2</h3>
<div>test2cont</div>
<div>
<p>Editorial Intro</p>
</div>
</div>
<h3>Spring</h3>
<div class="acorda">
<h3>test3</h3>
<div>test3cont</div>
<h3>test4</h3>
<div>test4cont</div>
<h3>test5</h3>
<div>test5cont</div>
<div>
<p>Editorial Intro</p>
</div>
</div>
</div>
<script type='text/javascript'>
jQuery(document).ready(function(){
jQuery(".acord").accordion({
header: "> h3",
heightStyle: "content",
collapsible: true,
});
jQuery(".acorda").accordion({
header: "h3",
heightStyle: "content",
active: false,
collapsible: true,
});
});
</script>
Can anyone provide some advice as to why the JavaScript is not loading?
As an extra note, I did successfully run the code with the Javascript loading, so really at a loss as to what the problem is.
<!DOCTYPE html>
<html>
<body>
<h2>JavaScript Alert</h2>
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
alert("I am an alert box!");
}
</script>
</body>
</html>
EDIT
I have modified the JavaScript thanks to suggestions made below. My only issue now is that I get an error on my page saying Uncaught TypeError: jQuery(...).accordion is not a function .
I have tried adding the jQuery UI dependency in both the page file and the header.php file of my WordPress theme, but neither is working.
<script src="code.jquery.com/ui/1.11.3/jquery-ui.min.js"></script>
Does someone know how to resolve the dependency issue?
3 answers
solution1
2 ACCPTED 2017-08-02 14:56:15
try use:
jQuery(document).ready(function(){
jQuery(".acord").accordion({
header: "> h3",
heightStyle: "content",
collapsible: true,
});
jQuery(".acorda").accordion({
header: "h3",
heightStyle: "content",
active: false,
collapsible: true,
});
});
solution2
0 2017-08-02 15:02:12
You can inline your script in your theme's functions.php .
This assumes your scripts are enqueue -ed.
If the accordion jquery extension library is enqueue -d with a $handle of accordion , you can write it this way.
$accordion = <<<HERE
$(".acord").accordion({
header: "> h3",
heightStyle: "content",
collapsible: true,
});
$(".acorda").accordion({
header: "h3",
heightStyle: "content",
active: false,
collapsible: true,
});
HERE;
wp_add_inline_script( 'accordion', $accordion );
solution3
-1 2017-08-02 14:55:14
On your Website you are using $ in your script whereas on website jQuery is used try this code jQuery(".acord").accordion({ header: "> h3", heightStyle: "content", collapsible: true, }); jQuery(".acorda").accordion({ header: "h3", heightStyle: "content", active: false, collapsible: true, }); jQuery(".acord").accordion({ header: "> h3", heightStyle: "content", collapsible: true, }); jQuery(".acorda").accordion({ header: "h3", heightStyle: "content", active: false, collapsible: true, });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.