Problems calling jQuery function from within normal JavaScript function

Question

Hi.

Tried looking at other solutions but they don't quite answer my question so here goes.

The code below shows me declaring an anonymous function to run when the document is ready which contains another function relating to a plugin which creates a horrizontal accordion. That function takes in certain properties and one property, eventAction, allows you to define a function and I've tried to call the jQuery AJAX load function but it does not work.

<script type="text/javascript">
    $(document).ready(function() {
        $(".accordion").hrzAccordion({
            openOnLoad: 6,
            fixedWidth: 648,
            eventAction: function(){
                $("#accordionContent0").load("hips.html");
            }
        });
    });
</script>

When I place the line $("#accordionContent0").load("hips.html"); outside of the $(".accordion").hrzAccordion function, but still with the ready function, it works fine.

Any ideas what I'm doing wrong by calling the load function inside the other function?

Thanks.

Answer 1

Try this:

<script type="text/javascript">
    $(document).ready(function() {
        $(".accordion").hrzAccordion({
            openOnLoad: 6,
            fixedWidth: 648,
            eventAction: function(){
                loadAcc($(".accordion"));
            }
        });
    });

function loadAcc(acc) {
  $("#accordionContent0").load("hips.html");
}
</script>