Collapse / Expand accordion menu

Question

I am working on a accordion style tab on this page https://www.hawaiidiscount.com/oahu/luaus/germaines.htm

When I test this offline it works but not on DNN. See where it says Video. This should collapse the tab when you click on it. And when you see it with a small device it is collapsed by default and it should expand when you click it. My js code is:

// Includes Everything
$(document).ready(function() {
    // level 1

    $(".arrow-right").hide();

    $(".LuauPackages").on("mouseover", function() {
        // Mouse Pointer
        $(".LuauPackages").css( { cursor: "pointer" } );

    });


    $(".LuauPackages").on("click", function() {
        if( $(this).parent().find(".LuauPackCont").is(":visible") ) {
            $(this).parent().find(".LuauPackCont").slideUp("fast");
            $(this).parent().find(".arrow").removeClass("arrow-down").addClass("arrow-right");
            } else {
            $(this).parent().find(".LuauPackCont").slideDown("fast");
            $(this).parent().find(".arrow").removeClass("arrow-right").addClass("arrow-down");
        }
    });


    // this is if window is greater than or equal to 736px
    if( $(window).width() <= 736 ) {
        $(".LuauPackCont").hide();
        $(".arrow-right").show();
        $(".arrow-down").hide();
    }
});

I would appreciate any tips what might be wrong. Thanks!

UPDATE: The code works fine when it is inline but when I put it in external scripts file it doen't work.

Answer 1

I can't comment as I don't have enough reputation but I noticed that you use $(this) alot. Just a tip, it's cleaner and more efficient to store the object in a variable once and then use that instead. Every time you use $(this) it is a function to create a new JQuery object. I have amended part of your code below to reflect this. I hope this helps.

$(".LuauPackages").on("click", function() {
    var $this = $(this).parent(); // Caches JQuery object

    if( $this.find(".LuauPackCont").is(":visible") ) {
          $this.find(".LuauPackCont").slideUp("fast");
          $this.find(".arrow").removeClass("arrow-down").addClass("arrow-right");
        } else {
          $this.find(".LuauPackCont").slideDown("fast");
          $this.find(".arrow").removeClass("arrow-right").addClass("arrow-down");
    }
});

Answer 2

I think you may want to change the order of your <script> tags. If there are references to jQuery or jQuery-UI before it's loaded, you'll get an error. Try ordering the <script> tags like so:

1. jQuery
2. jQuery-UI
3. You JavaScript files

Here's what I see on your site:

<script src="/Portals/0/Skins/HD-custom-design-s/Nav/jquery.min.js"></script>
<script src="/Portals/0/Skins/HD-custom-design-s/Nav/mobile-menu.js"></script>
<script src="/Portals/0/Skins/HD-custom-design-s/js/contentslider.js"></script>
<script src="/Portals/0/Skins/HD-custom-design-s/js/jquery.colorbox.js"></script>
<script src="/Portals/0/Skins/HD-custom-design-s/js/jquery-1.11.3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>

It looks like there are jQuery and jQuery-UI files loaded after your JS files.

In Chrome devtools, I see your site is showing this error (as Jeremy pointed out):

Uncaught TypeError: $(...).colorbox is not a function

You might be running into the same issue as this post:

JQuery and Colorbox loaded but "colorbox is not a function"