Planning the Collapsible Panel ControlOur Collapsible panel will be a simple one, to start with. It will basically be a table with two rows. First row will show the title and second row shows the content. The second row will contain a tag that will actually host the content. There will a small icon to top-left, clicking on which it will collapse vertically. Collapsing action of control will be slow and will show progressive fading (opacity). When the user clicks on the icon again, the content will restore itself in the same manner. Now, ours will not be a resizable control. So it makes lot of sense to give it some predefined height. All controls on a page will have same height , which looks descent. Our panel will only be collapsible in vertical direction and will be fixed (non draggable). At this point there is lot of temptation to put additional features (like horizontal collapse action, drag-drop, variable height ....etc), but these are not really essential for making a descent control. Though it seems very easy to pack these functionalities into the control, there is a lot of code that requires to be written and written carefully. This will be made clear later on in this article. But one serious feature that cannot be ignored is, our collapsible panel should behave and work in all major browsers in the same way. So I would like to make a basic, but descent control which works on all major browsers (right now FireFox and IE).
Giving the proper looksOur collapsible panel should look great, for people to use it. I am not the best of UI designers, but still I'll try my skills. I have made a separate CSS class, for each element and put it into a *.css file. The
widgetTableclass applies to the table as whole and gives it the dotted borders. The most important part of this class is width , which is specified in percentage. The
widgetTitle, specifies two important properties, first is predefinied height and second is background image that gives the title bar its look. In the class
widgetTDContentwhich is for the cell that will show the content, height is set to 0 pixel. This cell will contain a <DIV> tag which will host the actual content. Also note that widgetTDContent has no background color set. Most important is the
widgetDIVclass.It is here were height is hardcode as 180 pixels and overflow set to hidden.This will prevent ugly scroll bars showing up if the content size is more than the content area. Rest all styles are self explainatory. Click here for the StyleSheet.css file.
Copyright (c) 2007-2017 Ashish Patil . Please read FAQ for more details.