jQuery Resources Not Properly Loading Accordion

Question

I'm trying to build a simple navigation bar for my informational webpage about programming. The problem is actually a bit ironic in the sense that I can't figure out why this code isn't working.

I'm using the GoDaddy WebpageBuilder, but this specific item was added through their HTML element that you can add in. If you've used it before, you know what I'm talking about...

Anyways, the accordion is only loading half of the time. In some occasions it will load and operate perfectly fine; while in other cases it will simple place the extended accordion on the page, but without the accordion.

You can check it out here: www.shawftware.net

If the problem won't come up on the first try, keep refreshing until you see it; the accordion is in the top right corner of the page.

The error I'm getting in the JavaScript console is this:

Uncaught TypeError: Object [object Object] has no method 'accordion'

I have no idea what this means or what it does, so I'm hoping someone here understands how to fix this error, and why it's happening only half of the time.

Here's the source code I am running:

HTML:

<div id="accordionBox">
<div id="accordion">
  <h3>Navigation</h3>
    <div>
    <a href="http://www.shawftware.net/home.html"><p class="navButton" style="color: black">Home</p></a>
    <hr>
    <a href="http://www.shawftware.net/about.html"><p class="navButton">About</p></a>
    <hr>
    <a href="http://www.shawftware.net/contact.html"><p class="navButton">Contact</p></a>
    </div>
</div>
</div>

CSS:

<style>
    .gFontHeader{
        font-family: 'Montserrat Subrayada', sans-serif;
        font-size: 34px;
    }
    #accordionBox{
        width: 150px;
    }
    .navButton{
        text-align: center;
        color: #666666;
    }
    .navButton:hover{
        color: black;
    }
    #accordion a{
        text-decoration: none;
    }

</style>

JS:

<script>
    $(function(){
    $( "#accordion" ).accordion({
        collapsible: true,
        active: false
    });
});
</script>

Answer 1

I see that you are using two jquery files.

• jQuery JavaScript Library v1.8.3
• jQuery JavaScript Library v1.9.1

Please remove the older version of jquery and check if it works fine.

Answer 2

I had to use the GoDadday Hosting connection to install an Application (jQuery) using their web interface before I could get jQuery to work correctly. Their upload process using ftp adds lines into the documents you upload... it's a pain in the bum.