Banal et al:
here is the accordion I am trying to accomplish (noaccordion or collapsible):
http://www.i-marco.nl/weblog/jquery-accordion-menu-redux2/
I am using the jQuery 1.2.1 - New Wave Javascript
and also the jquery cookie plugin
I have not altered either of the above files.
Here is the sidebar.ss snippet:
You will notice I added $ID intosome of the classes. I did this because it seemed per the scripting there needed to be a unique identifier, i figured the $ID would give me this since there shouldn't be repetition of the page id's.
one last thing. The <% if ApplyAccordian %> is simply a Boolean checkbox I added so that I could remove the hyperlink from the link making it a clickable item (activating the accordian) without SS applying that page hyperlink. Not sure if that was clear haha!
Thanks for taking a peek.
<ul id="Menu2" class="menu collapsible" >
<% control Menu(2) %>
<% if Children %>
<% if ApplyAccordian %>
<li class="$LinkingMode $ID" id="moreLinks"><a href="#" class="$LinkingMode levela $ID">$MenuTitle.XML</a>
<% else %>
<li class="$LinkingMode $ID"><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode levela $ID">$MenuTitle.XML</a>
<% end_if %>
<% else %>
<li><a href="$Link $ID" title="Go to the $Title.XML page" class="$LinkingMode levela $ID">$MenuTitle.XML</a>
<% end_if %>
<% if Children %>
<ul class="sub">
<% control Children %>
<li class="$ID"><a href="$Link" title="Go to the $Title.XML page" class="$LinkingMode levelb $ID">» $MenuTitle.XML</a></li>
<% end_control %>
</ul>
<% end_if %>
</li>
<% end_control %>
</ul>
This is the menu.js file:
function initMenus() {
$('ul.menu ul').hide();
$.each($('ul.menu'), function(){
var cookie = $.cookie(this.id);
if(cookie === null || String(cookie).length < 1) {
$('#' + this.id + '.expandfirst ul:first').show();
}
else {
$('#' + this.id + ' .' + cookie).next().show();
}
});
$('ul.menu li a').click(
function() {
var checkElement = $(this).next();
var parent = this.parentNode.parentNode.id;
if($('#' + parent).hasClass('noaccordion')) {
if((String(parent).length > 0) && (String(this.className).length > 0)) {
if($(this).next().is(':visible')) {
$.cookie(parent, null);
}
else {
$.cookie(parent, this.className);
}
$(this).next().toggleoggle();
}
}
if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
if($('#' + parent).hasClass('collapsible')) {
$('#' + parent + ' ul:visible').toggle();
}
return false;
}
if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
$('#' + parent + ' ul:visible').toggle();
if((String(parent).length > 0) && (String(this.className).length > 0)) {
$.cookie(parent, this.className);
}
checkElement.toggle();
return false;
}
}
);
}
$(document).ready(function() {initMenus();});