[jQuery] jquery accordion
Hi people,
it took me a while to figure out, how to get an accordion interface
running. Now I started to use it nearby everywhere.
I really love that kind of navigation. But now I headed into some
troubles.
I implemented the accordion by use of div layers. I did find a demo
somewhere on how to do that. The accordion works finde when I load the
page. I can click the first menu element, the accordion opens, but
after i clicked another one which appears a little later, because
inbetween are a couple of empty elements
like:
nav1 -> working
nav2 -> no entries
nav3 -> no entries
nav4 -> working
nav4 -> working
nav5 -> working
but as a matter of fact, if I click the nav1 element it opens if i
click after that the nav4 element it opens nav1 closes, after that no
other element opens anymore. If I reload the page and click directly
on nav 4 it opens, but no other element is able to open afterwards.
The main problem in my case is, that the $
(items).children(titles).click(function(e){ ... } is not callled
anymore
after the first or the second click. I cant see why this is happening,
but I am sure, that one of your jquery guru
fellows, will be able to do it.
Thank you very much. Best Regards, Sascha
The code goes like this here:
<script language="javascript" type="text/javascript"><!--
$.accordian = function(items, first, options) {
var active = first;
var running = 0;
var titles = options && options.titles || '.title';
var contents = options && options.contents || '.content';
var onClick = options && options.onClick || function(){};
var onShow = options && options.onShow || function(){};
var onHide = options && options.onHide || function(){};
var showSpeed = options && options.showSpeed || 'slow';
var hideSpeed = options && options.hideSpeed || 'fast';
$(items).not(active).children(contents).hide();
$(items).not(active).each(onHide);
$(active).each(onShow);
$(items).children(titles).click(function(e){
var p = $(contents, this.parentNode);
$(this.parentNode).each(onClick);
if (running || !p.is(':hidden')) return false;
running = 2;
$(active).children(contents).not(':hidden').slideUp(hideSpeed,
function(){--running;});
p.slideDown(showSpeed, function(){--running;});
$(active).each(onHide);
active = '#' + $(this.parentNode)[0].id;
$(active).each(onShow);
return false;
});
};
$(function(){
$.accordian('#nav > div', '#nav1');
$.accordian('#nav > div', '#nav1, {
titles:'.nav_main',
contents:'.nav_sub',
onClick:function(){},
onShow:function(){$(this).removeClass('off').addClass('on');},
onHide:function(){$(this).removeClass('on').addClass('off');},
showSpeed:250,
hideSpeed:550
});
});
//--></script>
The needed stylesheets are these here:
<style type="text/css">
#nav { width:200px; }
.nav_main {
cursor:pointer;
}
.on .nav_main {}
.off .nav_main {}
.nav_sub {
}
</style>
The needed html code looks like this here:
<div id="nav">
<div id="nav0">
<div class="nav_main">Test1</div>
<div class="nav_sub">entryt1</div>
<div class="nav_sub">entryt2</div>
<div class="nav_sub">entryt3</div>
</div>
<div id="nav1">
<div class="nav_main">Test1</div>
<div class="nav_sub">entryt1</div>
<div class="nav_sub">entryt2</div>
<div class="nav_sub">entryt3</div>
</div>
<div id="nav2">
<div class="nav_main">Test1</div>
<div class="nav_sub">entryt1</div>
<div class="nav_sub">entryt2</div>
<div class="nav_sub">entryt3</div>
</div>
</div>