[JS] Sliding "Shelf"

programming web dev
1

So I’ve been using this script for a while… works fine http://www.monfx.com/journal/2006/08/01/sliding-ajax-shelf-the-code-behind-the-mask/

Now the thing I’m running across is if I want to use it on multiple divs on one page. I can do…


<script type='text/javascript'>
var slidingDiv1;
var slidingDiv2;

window.onload = function() {
slidingDiv1= new fx.Combo('slidingDiv1', '', {height: true, opacity: false, duration: 300});
slidingDiv2= new fx.Combo('slidingDiv2', '', {height: true, opacity: false, duration: 300});

slidingDiv1.hide();
slidingDiv2.hide();
}
</script>

and then call it in the html like this…


<a href="javascript:;" onclick="slidingDiv1.toggle();">slidingDiv1</a>
<div id="slidingDiv1"></div>
<a href="javascript:;" onclick="slidingDiv2.toggle();">slidingDiv2</a>
<div id="slidingDiv2"></div>

now this works great but when I have say… 15 DIVS i want to slide on one page the JS get bulky and quite honestly kinda fugly cause I have to make new vars, new function, new hide. What I was wondering is how I can change the JS a little bit to make it so I can call the DIV i want the anchor to expand in the HTML instead of repeating that crap in the JS essentially turning my HTML code to look something like…


<a href="javascript:;" onclick="slide.toggle(slidingDiv1);">slidingDiv1</a>
<div id="slidingDiv1"></div>
<a href="javascript:;" onclick="slide.toggle(slidingDiv2);">slidingDiv2</a>
<div id="slidingDiv2"></div>

Can anyone hook a brotha up. I’m also aware of the moo.fx library and it’s accordion effect, but that’s not the route I want to go. I’d like to use this specific script if at all possible.