/* Š2010 Red Ant Design Written by Dan the man Turns a regularly formatted content page into a TABBED, DIV TOGGLING interface SEE EOF for example structure */ var tabs_divs = Class.create({ initialize: function(obj) { // settings shared by script this.container = obj.container; this.control = obj.control; this.toggle = (typeof obj.toggle != 'undefined') ? obj.toggle : false; this.showFirst = (typeof obj.showFirst != 'undefined') ? obj.showFirst : false; this.tabs = []; this.controls = []; this.maxHeights = []; this.content_divs = []; // big array of everything var kids = $(this.container).childElements(); var vControls = $$('#'+this.container+' '+this.control); if (this.toggle != false) var vToggles = $$('#'+this.container+' '+this.toggle); var counter; // make dummy array var tab_array = []; for (var i=0;i"){ tab_array[counter].push(kids[i]); }else{ control_array.push(kids[i]); } if (kids[i].inspect() == "<"+this.control+">" && i > 0){ counter += 1; } } // make the control divs /* FROM THIS:

Tab control

Tab control

Tab control

TO THIS:

Tab control

Tab control

Tab control

*/ var el = new Element('div', {'id': 'controls'}); for (var i=0;i'+control_array[i].innerHTML+''; control_array[i].writeAttribute({'id': 'control-'+i, 'class': 'control'}); el.insert(control_array[i]); $(this.container).insert(el); this.controls.push(control_array[i]); } // make the tab divs /* FROM THIS:

Toggle control

Content goes here

Content goes here

TO THIS:

Toggle control open

Content goes here

Content goes here

*/ counter = 0; for (var i=0;i"){ itm = new Element('div', {'class':'toggle-item'}); t = new Element('div', {'id': 'toggle-content-'+counter, 'class':'toggle-content'}); sp = new Element('span'); // expand first item if (this.showFirst && q == 0 && i==0) { tab_array[i][q].addClassName("active"); sp.update("close"); }else{ sp.update("open"); } tab_array[i][q].insert(sp); counter++; itm.insert(tab_array[i][q]); itm.insert(t); this.content_divs.push(t); }else{ t.insert(tab_array[i][q]); } }else{ // no accordions itm = tab_array[i][q]; } el.insert(itm); } $(this.container).insert(el); this.tabs.push(el); } // listen for tab clicks for (var i=0;i -1) index = found; if (found > -1) remote = true } this.remote_click(null, index, remote); } }); /* EXAMPLE:

Tab title 1

Anchor 1

Fusce vel dui nisl, sit amet rhoncus nibh. Sed condimentum auctor eros, eu commodo erat cursus vel. Pellentesque ac fringilla diam. Curabitur interdum tellus a risus ornare bibendum. Cras libero risus, ornare vitae ornare blandit, pharetra id nisi. Etiam vel nisi orci. Aliquam erat volutpat.

Fusce vel dui nisl, sit amet rhoncus nibh. Sed condimentum auctor eros, eu commodo erat cursus vel. Pellentesque ac fringilla diam. Curabitur interdum tellus a risus ornare bibendum. Cras libero risus, ornare vitae ornare blandit, pharetra id nisi. Etiam vel nisi orci. Aliquam erat volutpat.

Fusce vel dui nisl, sit amet rhoncus nibh. Sed condimentum auctor eros, eu commodo erat cursus vel. Pellentesque ac fringilla diam. Curabitur interdum tellus a risus ornare bibendum. Cras libero risus, ornare vitae ornare blandit, pharetra id nisi. Etiam vel nisi orci. Aliquam erat volutpat.

Anchor 2

Fusce vel dui nisl, sit amet rhoncus nibh. Sed condimentum auctor eros, eu commodo erat cursus vel. Pellentesque ac fringilla diam. Curabitur interdum tellus a risus ornare bibendum. Cras libero risus, ornare vitae ornare blandit, pharetra id nisi. Etiam vel nisi orci. Aliquam erat volutpat.

Anchor 3

Fusce vel dui nisl, sit amet rhoncus nibh. Sed condimentum auctor eros, eu commodo erat cursus vel. Pellentesque ac fringilla diam. Curabitur interdum tellus a risus ornare bibendum. Cras libero risus, ornare vitae ornare blandit, pharetra id nisi. Etiam vel nisi orci. Aliquam erat volutpat.

Anchor 4

Fusce vel dui nisl, sit amet rhoncus nibh. Sed condimentum auctor eros, eu commodo erat cursus vel. Pellentesque ac fringilla diam. Curabitur interdum tellus a risus ornare bibendum. Cras libero risus, ornare vitae ornare blandit, pharetra id nisi. Etiam vel nisi orci. Aliquam erat volutpat.

Tab title 2

Anchor 1

Fusce vel dui nisl, sit amet rhoncus nibh. Sed condimentum auctor eros, eu commodo erat cursus vel. Pellentesque ac fringilla diam. Curabitur interdum tellus a risus ornare bibendum. Cras libero risus, ornare vitae ornare blandit, pharetra id nisi. Etiam vel nisi orci. Aliquam erat volutpat.

Anchor 2

Fusce vel dui nisl, sit amet rhoncus nibh. Sed condimentum auctor eros, eu commodo erat cursus vel. Pellentesque ac fringilla diam. Curabitur interdum tellus a risus ornare bibendum. Cras libero risus, ornare vitae ornare blandit, pharetra id nisi. Etiam vel nisi orci. Aliquam erat volutpat.

Anchor 3

Fusce vel dui nisl, sit amet rhoncus nibh. Sed condimentum auctor eros, eu commodo erat cursus vel. Pellentesque ac fringilla diam. Curabitur interdum tellus a risus ornare bibendum. Cras libero risus, ornare vitae ornare blandit, pharetra id nisi. Etiam vel nisi orci. Aliquam erat volutpat.

Anchor 4

Fusce vel dui nisl, sit amet rhoncus nibh. Sed condimentum auctor eros, eu commodo erat cursus vel. Pellentesque ac fringilla diam. Curabitur interdum tellus a risus ornare bibendum. Cras libero risus, ornare vitae ornare blandit, pharetra id nisi. Etiam vel nisi orci. Aliquam erat volutpat.

where : h2's are the tab titles h3's are the toggle items content between h3's is what should be hidden/revealed var TabsAndDivs = new tabs_divs( {'container':'something', 'control':'h2', 'toggle':'h3'} ); OR to ONLY show tabs, simply omit the toggle attribute var TabsAndDivs = new tabs_divs( {'container':'something', 'control':'h2'} ); */