One of the battles in Web development is to make your sites sticky with good designs and layout. Another is to convey the essence of your message quickly to anyone browsing your website. One way to do that is to use outline widgets like Acccordions or Tabs which allow the user to see the complete story in outline form without having to scroll down the page. another trick, illustrated in this article, is to use Expand/Collapse widgets. By clicking on an + icon the page expands out to reveal hidden text and/or images. Click again and the expanded content is collapsed. I have seen FAQ websites that pose the quetsion and then let the user press on an +icon to see an answer expand directly below the question. So expand-and-collapse widgets allow users to see the big picture while honing in on the specific answers/details they want.
Here is some commentary about the Caribana Festival in Toronto Ontario this summer. The Caribana parade is one of the features of the Festival [but there is certainly is lots more] ...
Click the icon to see more from the parade
one of the highlights of the Caribana parade is the dramatic costumes and floats
Here is some more detail on the finery from the parade - the crafting is quite clever:
So the Expand/Collapse widgets work reasonably fast and reliably.
The problem is that the HTML looks somewhat like JCL. JCL is IBM's mainframe Job Control Language,
infamous for its stunted syntax rules and tailspins into obscurity. Unfortunately,the Collapse/Expand
widgets I have conjured up leave the same impression.
Here is demo-ed some jQuery Tab Widget featuresOne nifty feature of jQuery Tab widgets is the ability to collaps the Tab Widget to just the tabs only. This footnote is really designed to show the advantages of the collapsible feature available in the jQuery Tabs. Note how stuff that is out of sight can be quickly scooted up into view when the tab is made to collapse. Not Bad!
Now here is a screenshot of Cold Fusion debugging -
Being able to dynamically change any HTML element's style is very useful. It forms the core of our Expand/Collapse Widget demo-ed here. But there is a trade-off - the HTML syntax used is a bit hefty and prone to mistakes. Obviously there is a limit to improving the syntax of the "widgets".
However, this exercise is based on the fact that most browser users do not want to scroll down a page. So Tabs and Accordion Widgets along with this Expander/Collapser allow Web designers to crunch as much as possible onto a screen page to pitch "the full story" to their browsing customers.