# \[JS\] Sliding "Shelf"

**URL:** <https://forum.kirupa.com/t/js-sliding-shelf/209936>\
**Category:** web dev\
**Created:** [December 13, 2006, 2:05pm UTC](https://forum.kirupa.com/t/js-sliding-shelf/209936 "2006-12-13T14:05:36Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![simplistik](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/simplistik/32/7747_2.png) [@simplistik](https://forum.kirupa.com/u/simplistik)\
**Post date:** [December 13, 2006, 2:05pm UTC](https://forum.kirupa.com/t/js-sliding-shelf/209936/1 "2006-12-13T14:05:36Z")

</div>

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/](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…

```auto

<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…

```auto

<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…

```auto

<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.