Hi,
I´m a newbie in modx an I try to get this accordion menu
http://www.unwrongest.com/projects/accordion/ working.
It works perfect on the static site but with modx it won´t.
The problem is when you click on a container the accordion is only a moment open because a new page is loading.
The other problem is that the container have to be open when you are in a container. I hope you understand what I mean.
Here´s the code:
chunk: accordionContainer
<ul id="menu" class="menu collapsible">[+wf.wrapper+]</ul>
chunk: arccordionRows
<li [+wf.classes+] > <a href="[+wf.link+]" title="[+wf.title+]" [+wf.attributes+]>[+wf.linktext+]</a> [+wf.wrapper+] </li>
chunk: accordionInnerContainer
<ul [+wf.classes+]>[+wf.wrapper+]</ul>
an the wayfinder call:
[[Wayfinder? &startId=`0` &outerTpl=`accordionContainer` &rowTpl=`accordionRows` &innerTpl=`accordionInnerContainer` &level=`2` &excludeDocs=`16`]]
JS accordion:
(function($){
$.fn.extend({
accordion: function() {
return this.each(function() {
if($(this).data('accordiated'))
return false;
$.each($(this).find('ul, li>div'), function(){
$(this).data('accordiated', true);
$(this).hide();
});
$.each($(this).find('a:not(.foo)'), function(){
$(this).click(function(e){
activate(e.target);
return void(0);
});
});
var active = false;
if(location.hash)
active = $(this).find('a[href=' + location.hash + ']')[0];
else if($(this).find('li.current'))
active = $(this).find('li.current a')[0];
if(active){
activate(active, 'toggle','parents');
$(active).parents().show();
}
function activate(el,effect,parents){
$(el)[(parents || 'parent')]('li').toggleClass('active').siblings().removeClass('active').children('ul, div').slideUp('fast');
$(el).siblings('ul, div')[(effect || 'slideToggle')]((!effect)?'fast':null);
}
});
}
});
})(jQuery);
and the html accordion call in the body tag:
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery-accordion.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
// <![CDATA[
$(document).ready(function () {
$('ul').accordion();
});
// ]]>
</script>
Thanks a lot for helping!
Rainer
