The reason the module is broken when using loadposition, etc, is because doing so forces the accordion module javascript (which is written in, and therefore relies upon, jQuery library) to load prior to the jQuery library being loaded. A simple "View Source" command in any browser will reveal this. Therefore, the trick is to load jQuery
prior to any module code.
Now, every template potentially loads its various javascript libraries in different ways, and your preferred jquery library may not be located in the site filesystem where mine is. Also, it's not always clear from the template
file where it's actually doing the loading. Therefore, you may need to tweak the following script accordingly. That said, essentially all I did here was hardcode the jQuery loading scripts into the template
file as follows (note the <!--comments--> below for more detail):
<!-- below is the html tag, starting the html off -->
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" dir="<?php echo $this->direction; ?>" >
<!-- some Internet Explorer fixes because... well, because Microsoft. -->
<!--[if lt IE 7]> <html class="no-js lt-ie9 lt-ie8 lt-ie7" lang="en"> <![endif]-->
<!--[if IE 7]> <html class="no-js lt-ie9 lt-ie8" lang="en"> <![endif]-->
<!--[if IE 8]> <html class="no-js lt-ie9" lang="en"> <![endif]-->
<!--[if gt IE 8]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
<head> <!-- the head tag! all the scripts and supporting files get loaded here --->
<!-- just beneath the head, the following three script tags are hardcoded to load jQuery as early as possible in the page load. -->
<script src="/media/jui/js/jquery.min.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-noconflict.js" type="text/javascript"></script>
<script src="/media/jui/js/jquery-migrate.min.js" type="text/javascript"></script>
<!-- then the joomla jdoc call to bring in all other scripts -->
<jdoc:include type="head" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- then stylesheets and erthing else... -->
<!-- Stylesheets -->
So in other words, load in jQuery as early as possible, so that it loads before the accordion module scripts are called. One caveat is that this method loads jQuery twice, first in the hardcode, the second time in the jdoc call. This almost certainly slows down the page load, though I couldn't say how severe this slowdown would be.
cheers!
