dynamic show/hide div controls in php with js? - php

Question

I have some SQL output that id like to format into a collapsible div. The problem is that all the JS show/hide div code I find isn't really meant for dynamic instances, they all need to be pre-assigned to a particular div. Since my results may vary from 1-30...this isn't really a good option.
My question. Is there an easy way to dynamically generate show/hide controls for a varying number of layers?

Answer 1

<div id="CollapsiblePanel1" class="CollapsiblePanel">
<div class="CollapsiblePanelTab" tabindex="0">Tab</div>
<div class="CollapsiblePanelContent">Content</div>
</div>
<script type="text/javascript">
<!--
var CollapsiblePanel1 = new Spry.Widget.CollapsiblePanel("CollapsiblePanel1");
//-->
</script>

Answer 2

It actually is pretty easy with mootools (or jquery for that matter).
You just need to give all generated divs the same class and select all of them and apply collapsible behaviour.
This is a little script written in mootools for one of our projects and might get you on the way. It fetches all elements with classes that start with toggle_ and the part that comes after the underscore is the id of the div this control is supposed to collapse.
So you generate a butteon with class 'toggle_mydiv1' which would toggle a div with id 'mydiv1'
This way you can generate as many elements as you want and assign behaviour to all of them with one script.
Written in mootools:
window.addEvent('domready', function(){
var clickAbles = $$('form[class^=toggle_]');
clickAbles.each(function(el){
var _class = el.get('class').split(' ');
var clickElement = _class[0].replace('toggle_','');
clickElement = $$('ul.buttons li.'+clickElement+' a');
if(clickElement){
var myFx = new Fx.Tween(el,{duration: 'long'});
var myFx2 = new Fx.Tween(el,{duration: 'long'});
el.store('height', el.getSize().y);
el.store('state', 'close');
el.setStyles({'display': 'none', 'height': 0});
var todoLists = el.getElements('ul.todo_list');
clickElement.addEvent('click', function(e){
e.stop();
if(el.retrieve('state') == "close"){
el.setStyle('display','block');
myFx.start('height', [0,el.retrieve('height')]);
myFx.addEvent('complete', function(){
todoLists.setStyles({'overflow': 'auto'});
el.store('state', 'open');
});
} else {
if(el.retrieve('state') == "open"){
myFx2.start('height', [el.retrieve('height'),0]);
myFx2.addEvent('complete', function(){
el.setStyles({'display': 'none', 'height': 0});
todoLists.setStyles({'overflow': 'hidden'});
el.store('state', 'close');
});
}
}
});
}
});
});