Posted by icedangel61 on April 17, 2010 at 4:16am
Hello,
I am developing a theme for a project and in one of the pages I want to have accordion effect on the custom menus. Here is the jQuery that I wrot to get the accordion to work:
if(Drupal.jsEnabled) {
$(document).ready(function(){
$('#block-menu-menu-characters-list ul.menu li.expanded .menu') .hide();
$("#block-menu-menu-characters-list ul.menu li.expanded").hover (
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
});
$(this).click(function() {
$('.hover .menu') .toggle('slow');
}
$('.hover .menu') .hide('slow');
});
});
}The jQuery effects works fine so far, but I want the open menu collapses as the other one expands. Right now when you click on the next menu the first one remains open. Any suggestion?
Here is the URL to the page:
http://www.lexiconquest.com/characters
And also, what is the best Module for accordion effect? I tried Accordion Menu, jQueryMenu, DTHML Menu, and they all have their own issues. None of them worked properly.
Thanks in advance.
Comments
Did you try jQuery UI? It
Did you try jQuery UI? It comes with an accordion effect. Here's information on using the accordion: http://jqueryui.com/demos/accordion/
In that case, more work would be put into making sure your markup matches correctly than writing any javascript. How difficult that will be depends on how your menu is built.
Amanda
Thanks
Thank you Amanda for your reply. Yes I have tried the jQuery UI, but it's not exactly what I am looking for, and I found it harder to tweak that instead of writing my own script. I guess I need a if else statement in my code somewhere but I am not a Javascripter.
You might try something like
You might try something like this, then:
http://www.stemkoski.com/stupid-simple-jquery-accordion-menu/
$(document).ready(function() {
//ACCORDION BUTTON ACTION
$('div.accordionButton').click(function() {
$('div.accordionContent').slideUp('normal');
$(this).next().slideDown('normal');
});
//HIDE THE DIVS ON PAGE LOAD
$("div.accordionContent").hide();
});
The basic idea is to hide all content upon page load, and then upon click, the div that comes after the "button" slides open. There is also a line for closing any open content divs so your open items close when you click a new menu item. It could be rewritten to do that for a menu item's children, or something like that. Does that help?
Amanda
That didn't work either
Thanks so much again, I really appreciate your time. Ok for some reason, the slideUp and slideDown does not work and I had to use .toggle instead. This is what I used before using the toggle:
$(document).ready(function() {
$('li.expanded').click(function() {
$('li.expanded ul.menu').slideUp('normal');
$(this).next().slideDown('normal');
});
$("li.expanded ul.menu").hide();
});
}
and with replacing the slideUp and down I get a very weird accordion effect. My first approach was somehow successful. What I did was I added a class to the menu that you hover, and create a click function for that specific class. It did work, but it didn't collapse the menus. Do you have any suggestion how I can add a if else statment to this?
$('#block-menu-menu-characters-list ul.menu li.expanded .menu') .hide();
$("#block-menu-menu-characters-list ul.menu li.expanded").hover (
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
});
$(this).click(function() {
$('.hover .menu') .toggle('slow');
/*return false;*/
},function() {
$('.hover .menu') .hide('slow');
});
});
I guess the last function which is the click function needs to be a if else statement.
And one last question. Is there any way to add HTML class to each menu? I tried the Class Menu module but it doesn't seem to work with Drupal 6.0
Thanks again,
Interested in this, where are
Interested in this, where are putting your jquery code? in page.tpl ?
No they are in script.js file
No they are in script.js file located in the root directory of my theme
../sites/all/themes/myTheme/script.js
are you using drupal_add_js()
are you using drupal_add_js() ?
No I don't use it. What do I
No I don't use it. What do I need it for? Drupal picks up script.js file automatically right?
Add your js file to the
Add your js file to the YOURTHEME.info file in your themes folder:
See http://drupal.org/node/171205#scripts
Amanda
and don't forget to clear the
and don't forget to clear the caches
But that's for drupal 5.0 I
But that's for drupal 5.0 I guess. Drupal 6 will detect script.js file automatically, and for every other JS file with different names what you said is correct, and I have to add them to my theme.info file. The script is loading into the page, but the problem is it's not fully functioning. It's more of a Javascript issue. Since, menus in Drupal are so complicated, I can't get the accordion effect to work. My bad, I should have post this to another location maybe.
Right now when I click on the list of the characters here:
http://lexiconquest.com/characters
They expand as I expect, but when I click on another name, I want the first menu to be collapsed again.
And one last problem. The top menus, for example "Billy Pilgrim" should be a no link. Can I do that with jQuery as well?
Thank you all.
Did you try hiding all open
Did you try hiding all open menu lists first in the click function? Then the next line of the script would toggle the new menu list open. But I'm not a jquery expert. :)
Amanda
Thanks that seems to work,
Thanks that seems to work, but the problem is the parent menus are link, and as soon as I click on them it goes to that page. Is there any way to change some of the menus to nolink and still click-able? I tried this and it didn't wok (there are some work around for Drupal 6):
http://drupal.org/node/143322
I also tried Special Menu Items module that allows us to create nolink menus, but they are not click-able with no hand cursor. Is there a better way to create nolink menus?
You can change the cursor to
You can change the cursor to a "hand" with css:
cursor: pointer;.They should be made clickable via the jQuery script.
Amanda
Hey Hessam, I see you got it
Hey Hessam, I see you got it working at http://www.lexiconquest.com/characters can you post your entire code so that it helps others ?
Thanks....
Sure. Actually a friend of
Sure. Actually a friend of mine who's an jQuery expert helped me out and he explained everything clearly to me. This is a easy task to do with simple HTML mark up but when it comes to drupal with all its parented menus...
Anyway here is the code:
if(Drupal.jsEnabled) {
$(document).ready(function(){
$('li.expanded > a').attr("href", "#");
$('#block-menu-menu-characters-list ul.menu li.expanded .menu') .hide();
$('#block-menu-menu-characters-list ul.menu li.expanded.active-trail .menu') .toggle();
$('#block-menu-menu-characters-list ul.menu li.expanded.active-trail .menu').addClass('expandedPanel');
$("#block-menu-menu-characters-list ul.menu li.expanded").hover (
function () {
$(this).addClass("hover");
},
function () {
$(this).removeClass("hover");
});
$("#block-menu-menu-characters-list ul.menu li.expanded").click(function() {
if(!$('.hover .menu').hasClass('expandedPanel')){
$('.expandedPanel').hide('slow');
$('.hover .menu').toggle('slow');
$('.expandedPanel').removeClass('expandedPanel');
$('.hover .menu').addClass('expandedPanel');
}
})
});
}
As you can see, first I removed that links from the parent items in the first line, and then hide all the child menus. Then I added a "hover" class to the menus that you hover, and removed them when the mouse is away from that item.
These two lines in the begining :
$('#block-menu-menu-characters-list ul.menu li.expanded.active-trail .menu') .toggle();$('#block-menu-menu-characters-list ul.menu li.expanded.active-trail .menu').addClass('expandedPanel');
Makes the active trails open. For example when you go to a character's profile page, that menu will remain open because it's got the "active-trail" class.
Last chunk of code deals with the accordion effect.
Hope that helps other newbies like me :)
Cheers dude, nice code!
Cheers dude, nice code!
thanks for that!! it helped
thanks for that!! it helped me alot!!