Collapsible Panel With Relative Positioning


Examples of simple panels with relative positioning.Click on the () to view contents of panel and () to collapse them.Notice the 'sliding effect' when you collapse or restore a panel. This is possible due to relative possible.

Click here to see more demos .
Click here to read the article Javascript, OOP and Reuse .

The following script was used to create the panels:
var x = new OOPPanel('a','Articles',"<p align='center'><br><br>Find all my articles <br><a href=''>here</a></p>",180,0.85,1,6);
x.SetContentDIVStyle('widgetDIV1');
x.SetContainerStyle('widgetTable1');
x.SetTitleStyle('widgetTitle1');
x.Collapsed(true);

var x1 = new OOPPanel('b','About Me',"<p align='center'><br><br>Find all about me <br><a href=''>here</a></p>",180,0.75,10,10);
x1.SetContentDIVStyle('widgetDIV1');
x1.SetContainerStyle('widgetTable1');
x1.SetTitleStyle('widgetTitle1');
x1.Collapsed(true);

var x2 = new OOPPanel('c','FAQ Page',"<p align='center'><br><br>Find FAQs answered <br><a href=''>here</a></p>",180,0.90,10,10);
x2.SetContentDIVStyle('widgetDIV1');
x2.SetContainerStyle('widgetTable1');
x2.SetTitleStyle('widgetTitle1');
x2.Collapsed(true);



Copyright (c) 2007-2017 Ashish Patil . Please read FAQ for more details.

comments powered by Disqus