I'm pretty sure you've already seen this Show/Hide box trick, when you click on the header of the box it will toggle the box closed when it s open, vice versa. This 3 simple lines of codes will do the same trick, The box will show n Hide with a smooth transition. Just copy n paste this in your JS File: <">Don't sure whether this codes works? Try it first lah... Try clicking the header of the main control panel, it will toggle up between Show/Hide. For other boxes here's the code, I don't set them to Hide. Just try clicking the header to Show/Hide. <">This codes will slide-in and slide-out friends box, HORIZONTALY <">Infact you can use this Slide Effects, to ALMOST every tags in your HTML pages. Just supply the Element ID: var SLIDEOBJVAR = new Fx.Slide(ELEMENT ID); after that call the method of the object, in this case SLIDEOBJVAR.toggle() - actually there are other methods you can use: SLIDEOBJVAR.slideIn() SLIDEOBJVAR.slideOut()() SLIDEOBJVAR.toggle() SLIDEOBJVAR.hide() Or you can call the method when there is an event, such as : click, mouseenter, mouseleave, etc Attach the click event to ELEMENT ID, it could be a Tag <h2>, button, anchor. So when the Element has been click it should call the method: ELEMENT ID.addEvent('click',function(){SLIDEOBJVAR.toggle();}); This last example will add the effect on Element Id = 'controlPanelButtons' <">[b][UPDATE 06-09-2008][/b] This is the [b]FINAL[/b] version of the tflAccordion, simple codes, flexible n easy to use. JS Codes: <">[b]RULES :[/b] - We can put every box id in just one group, even your own made box [quote]... addBox("RIGHT","My addBox Header",sTemp,[b]"myAddBox"[/b],"2"); ... // group abc var a = ['0','1','6','18','2',[b]'myAddBox'[/b]]; var b = ['content_0','content_1','content_6','content_18','content_2',[b]'content_myAddBox'[/b]]; var c = []; tflAccordion(a,b,c);[/quote] - The default for all boxes in the group is hide, [b]EXCEPT[/b] for the [b]1st[/b] item [quote]var a = [[b]'0'[/b], '1', '6', '18']; var b = [[b]'content_0'[/b],'content_1','content_6','content_18'];[/quote] - So if you want your Public Comment to open when the page load, change the order [quote]var a = [[b]'18'[/b], '0', '1', '6']; var b = [[b]'content_18'[/b],'content_0','content_1','content_6'];[/quote] - You can even have more than one group [quote]// Make 1st group abc (For all the box on the Left Side) var a = ['0', '1', '6', '18']; var b = ['content_0', 'content_1', 'content_6', 'content_18']; var c = []; tflAccordion(a,b,c); // Make 2nd group xyz (For all the box on the Right Side) var x = ['2', '8']; var y = ['content_2', 'content_8']; var z = []; tflAccordion(x,y,z,'mouseenter'); //... More group(s)[/quote] - A box can belong to one group only [quote]var a = [[b]'0'[/b], '1', '6', '18']; ... var x = [[b]'0'[/b],'2', '8'];// This is wrong[/quote] - If you have box(s) but [b]Don't[/b] include them in any group, it'll stay [b]Open[/b]. - Besides using a mouse clik to Show/Hide the box, u can use mouse hover on the box header You [b]MUST[/b] try this option [quote]// call using this 'mouseenter' option tflAccordion(x,y,z,'mouseenter');[/quote] Usage n Explanation : Look in the JS codes comment. [b]Live preview:[/b] [url]http://profiles.friendster.com/50738231[/url] This is just a plain Accordion. I'll leave the CSS part to your guys, to add some flavours to it. GBU

Last edited by tekfatliu (2008-09-08 01:00:13)