Hi
I have made a Jquery ’Accordion’ menu in that works fine in a ’regular’ HTML page but it will not work inside Modx page content.
The CSS styling works but the menu is
open and appears to not be using the Jquery whether it is called from the main page template or from a chunk.
I found a few post relating to some conflicts, but I am not a
coder and it was a bit confusing :’( .
The jist of what i found is that there is a conflict between mootools and (unmodified) Jquery in Modx.
I have a Jquery menu that works ok using ’wayfinder’ but I really need the content menu to work from modified content inside divs within the page not from a call to the main page lists (I hope that makes sense).
With quick search, I found I can also make an accordion using Mootools... should I switch or is there a better way of making Jquery workinside content?
The head of my templte looks like this:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>[*pagetitle*] | [(site_name)] | [[MetaTags]]</title>
<base href="[(site_url)]" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css/chaplinsstyle3.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="assets/js/jquery.js"></script>
<script type="text/javascript" src="assets/js/chili-1.7.pack.js"></script>
<script type="text/javascript" src="assets/js/jquery.easing.js"></script>
<script type="text/javascript" src="assets/js/jquery.dimensions.js"></script>
<script type="text/javascript" src="assets/js/jquery.accordion.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery().ready(function(){
// simple accordion
jQuery('#list1a').accordion();
jQuery('#list1b').accordion({
autoheight: false
});
});
</script>
</head>
Have I missed something?
I have the accordion menu called as a chunk inside my content div and the content is as follows:
<div class="basic" id="list1b">
<a>This is Test menu only</a>
<div>
<p>
Tester title<br/>
More here<br/>
This is a test <br/>
Add link here
</p>
</div>
<a>A second list here...</a>
<div>
<p>
tester links<br/>
More testers.
</p>
</div>
<a>Another link Again</a>
<div>
<p>
More links to test
</p>
<p>
And now, the end is near<br/>
And now, the end is near<br/>
And now, the end is near<br/>
Here is is<br/>
</p>
</div>
</div>
Will I need to add mootools.js to my
assets/Js folder?
Is it just as easy to make it work?
I am happy to switch just to get this site finished if there is a case... although minimal, i have more experience with Jquery but it just won’t work at the moment.
thanks
