I've got a problem I've previously solved with mootools, but I'm looking to translate it into jQuery to integrate nicely into Drupal. Can anyone take a look over it for me?
The idea: a cross between an accordion and simple sliding divs. I have a set of links in the footer (imagine the 'Contact Us - Overclockers UK - Top' links at the bottom of the forum page) that I'd like to be able to link to divs that slide in and out when the corresponding link is clicked. These divs will be separate from the list (could be above or below the links), so generic accordion applications won't work. Generic sliding div solutions won't work either, as I'd like open divs to close before a new one opens, and these generally act on a single div.
No divs are open & a link is clicked - slide open the appropriate div.
A div is open & a different link is clicked - slide closed open div & then open the new one.
A link to div that is already open is clicked - slide closed the div.
In mootools, this looked like this:
Done a fair amount of mootools, but never jQuery
Thanks for any input
The idea: a cross between an accordion and simple sliding divs. I have a set of links in the footer (imagine the 'Contact Us - Overclockers UK - Top' links at the bottom of the forum page) that I'd like to be able to link to divs that slide in and out when the corresponding link is clicked. These divs will be separate from the list (could be above or below the links), so generic accordion applications won't work. Generic sliding div solutions won't work either, as I'd like open divs to close before a new one opens, and these generally act on a single div.
No divs are open & a link is clicked - slide open the appropriate div.
A div is open & a different link is clicked - slide closed open div & then open the new one.
A link to div that is already open is clicked - slide closed the div.
In mootools, this looked like this:
Code:
window.addEvent('domready',function() {
// add referring elements to an array
var headings = $$('.collapselabel');
// array to store all of the collapsibles
var collapsibles = new Array();
// for the number of elements in headings
headings.each(function(heading, i) {
// get corresponding div.collapse
var coldivid = 'collapse' + heading.id.substring(13);
var coldiv = document.getElementById(coldivid);
// set effects for collapsible
var collapsible = new Fx.Slide(coldiv, {
duration: 500,
transition: Fx.Transitions.quad
});
// stores entry in collapsibles array
collapsibles[i] = collapsible;
//add event listener
heading.onclick = function(){
escapelink:
// if collapsible is closed
if (!collapsible.open) {
// slide closed any open collapsibles
for (var j=0; j<collapsibles.length; j++){
if (j!=i) {
if (collapsibles[j].open) {
// and chain-open this one
collapsibles[j].slideOut().chain(function(){collapsible.slideIn();});
}
break escapelink;
}
}
}
// ... open this collapsible if no others are found open
collapsible.slideIn();
}
// else if collapsible is open ...
else
{
if (collapsible.open) {
// ... slide it closed
collapsible.slideOut();
}
}
return false;
}
// hides collapsible before display
collapsible.hide();
});
});
Thanks for any input
Last edited: