jQuery + anchor based accordion
- Started
- Last post
- 4 Responses
- ********
Hi Guys, does anyone of you have or know some examples of query accordion that works on anchors (similar to this: http://www.duarte.com/#1.0.0 - this one is using different framework);
Once you click section - content is expanded and scrolled to top and # anchor appears in address bar. I have found a lot of accordion examples, but without anchor option. I also tried to combine accordion and scrollTo effectg but something went wrong.
- adev0
well first, that site is Flash, not javascript.. But here's soomething similar, sorta.... http://www.typeblue.com/temp/
- janne760
http://bassistance.de/jquery-plu…
demo:
http://jquery.bassistance.de/acc…not sure about anchors though
- acescence0
I find the accordion plugin to be quite bloated since it's a does-everything-for-everyone type of thing.
I usually just do this stuff manually using slideUp and slideDown and binding them to whatever you want to trigger the actions.
the hash bit is a simple matter of just setting location.hash whenever something is clicked.
on document load, you can retrieve location.hash and open the proper section
- ********0
Good thing about anchor is that when you type address manually, you'll get the panel expanded; I have accordion working already, but can't combine it with anchors or slideTo effect; here is my code for accordion:
$(document).ready(function() {
$('#box> div> div.content').hide();
$('#headerMain > div').slideDown('slow');
$('#box> div> h2').click(function() {
var $nextDiv = $(this).next();
//var $visibleSiblings = $nextDiv.siblings('#box> div.content:visible');var $visibleSiblings = $(this).parent().siblings('#box> div').children('div:visible');
if ($visibleSiblings.length ) {
$visibleSiblings.slideUp(500, function() {
$nextDiv.slideToggle(600);
});
} else {
$nextDiv.slideToggle(600);
}
});
});adev - thanks for example with nice effect ;)