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?

If the JS is interacting with DOM elements, it needs to come after the HTML. — Kevin
– Kevin, Commented Aug 2, 2017 at 14:48
What debugging have you done? What errors are you getting in the console? — j08691
– j08691, Commented Aug 2, 2017 at 14:48
@Kevin I updated the code but am still having the same issue. — Alex F
– Alex F, Commented Aug 2, 2017 at 14:50
@j08691 I have no errors when running the code. I am honestly not sure how to debug the Javascript not loading. — Alex F
– Alex F, Commented Aug 2, 2017 at 14:50

Ramy Nasr · Accepted Answer · 2017-08-02 15:01:53Z

2

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,
    });
});

edited Aug 2, 2017 at 15:01

Ramy Nasr

2,55723 silver badges25 bronze badges

answered Aug 2, 2017 at 14:56

Augusto Monteiro

4911 gold badge3 silver badges16 bronze badges

Sign up to request clarification or add additional context in comments.

15 Comments

Alex F Over a year ago

thanks for the suggestion. I gave it a try, but I'm getting an error saying Uncaught ReferenceError: Jquery is not defined.

Alex F Over a year ago

Hey @AugustoMonteiro, thanks for the answer. I see how this should work, but I'm getting an error saying Uncaught TypeError: jQuery(...).accordion is not a function.

Augusto Monteiro Over a year ago

Cool, this means that the accordion plugin isn't being loaded

Augusto Monteiro Over a year ago

you have to add jQueryUI to be able to use the accordion, I looked at the source code of the page you added on the description and the ui isn't being loaded

Alex F Over a year ago

thanks for the advice. I'm using a WordPress site so I'm not sure I can download the JQuery UI from the link you provided and then include it in my website. Is there a script tag I can include to load the accordion plugin?

|

Oluwafemi Sule · Accepted Answer · 2017-08-02 15:02:12Z

0

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 );

answered Aug 2, 2017 at 15:02

Oluwafemi Sule

39.3k1 gold badge63 silver badges88 bronze badges

Comments

Omkar Vaity · Accepted Answer · 2017-08-02 14:55:14Z

-1

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, });

answered Aug 2, 2017 at 14:55

Omkar Vaity

554 bronze badges

3 Comments

RaV Over a year ago

It wont work as well, because when he execute javascript, html element dont exists yet and jQuery object is empty. You'd need to add $( document ).ready()

Alex F Over a year ago

Gave this a try as well. Thanks for the suggestion.

Omkar Vaity Over a year ago

Yes but this change needs to be done along with $(document).ready() thanks for the correction cheers.

Collectives™ on Stack Overflow

My JavaScript won't load in my WordPress HTML file?

3 Answers 3

15 Comments

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

15 Comments

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related