A Tabbed Interface for Showing Parent/Child Data

Last week's 4Guys article looked at creating a collapsible details region using a Repeater and some nifty client-side DHTML. This technique allows for a page with potentially gobs of information to be presented in a more readable format, as can be seen in this live demo. (The astute reader might have noticed that this technique is identical to a collapsible RssFeed demo I provided a while back...)

Anywho, I was playing with the client-side code a bit and thought that it would be cool to take this concept a bit further and have collapsible-like regions for displaying parent/child data. After a lot of tweaking, I was able to create a demo that had the look and feel I wanted. Now, I have to warn you I am pretty limited when it comes to my client-side / CSS skills, so any suggestions on improving the code would be most appreciative. Also, note that it works best on IE - in FireFox it “works,” but doesn't look good.

In any event, here's a live demo: http://aspnet.4guysfromrolla.com/demos/TabInterface.aspx. To view the client-side code, you'll have to do a view/source. The output was generated with some hardcoded HTML markup and a Repeater (for getting the parent/child database data). Eventually I'd like to make this into a custom server control, but one thing at a time... So, if you want to take a look at the demo, feel free, and leave a comment if you have ideas on improving the CSS. The plan is to write up an article on this for 4Guys sometime this week.