So you're working with Jquery accordion, and you've got got links elsewhere on the page you want to open the accordion panel. Just how the heck do you go about this?
Well, there's no extremely easy solution. This however, does work, and isn't entirely all that confusing:
The code you will want to create for each anchor
$("a#accord1trig").click(function(event){
$( "#accordion" ).accordion({ active: 0 });
});
The code explained so you can modify it and use it yourself
$("(insert unique identifier of trigger link here).
$( "Accordion ID goes here" ).accordion({ active: # of panel you want opened goes here (0 being first panel) });
});
The functionality explained:
When you click on your link, (in my case, a link with id = accord1trig) it opens the accordion panel zero (Since most programming languages start at zero, our first accordion panel is really zero). You will want to create one of those for each different menu link, and be sure to use unique ID's for the links.
Tangent:
It wouldn't be all that tough to create an automated function for this in Jquery. The function would simply take all of the list item anchors, and have them open a accordion panel which corresponds with the place of the item in the list (first item opens zero, second item opens one, third item opens two, etc etc). It's something I may investigate developing and contributing to the Jquery accordion in the future.
Oops, your system didn't take
Oops, your system didn't take the code-tags on the link, justlook into the source code :D
Hello Blog operator. Most
Hello Blog operator.
Most people use the jQuery UI accordion which, imho, is too elaborate.
Using the normal slideDown or slideUp or even slideToggle function can do the same with less effort.
To open a certain panel from an external link then, can be easily done by using this:
hash = window.location.hash;
if(hash != 0)
{
$(hash).trigger('click');
}
of course after having defined the click function first, sth along the lines of:
$(document).ready(function () {
$("[unique id or class of accordion] [element e.g. div]:not(:first)").hide();
//or hide all of them
//$("[unique id or class of accordion] [element]").hide();
$("[unique id or class of accordion] [trigger element]").click(function(){
$(this).next("[element]").slideToggle()
.siblings("[element]:visible").slideUp();
});
});
The link would be sth like:
Blabla
What do you think ?
Interesting stuff on your blog by the way.
Peace,
therealAnodyne
Post new comment