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.


This set of JavaScript demos are designed to kill two birds with one stone. First, the use of the jQuery JavaScript Tabs will illustrate the point on how Tab Widgets can condense the essential information on a page for one quick easy viewing. Second, by use of simple icons, CSS, and JavaScript one can create Expand/Collapse widgets that can be useful for FAQ or other pages where designers want to condense info as much as possible.

The JavaScript coding required is fairly simple - turn off and on the text blocks using the following CSS display:none and then display:inline . However, the HTML to control widgets is just a little hairy:

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.

To simplify the HTML one can get rid of the title= clause; but that then removes the hover hint that appears when a user hovers their mouse over the icon or expandable phrase. The style="display:none" in the hidden text block is required to make it hidden until requested. The onclick=jsdomexpand('unique-id'); is required to trigger and reveal the hidden DIV. Even simplifying the function call using this instead of a unique-id ran into complications when several Expand/Collapse widgets were all simultaneously expanded.

The truth is that to toggle a style property for an HTML tag is not as syntactically easy as one might want or expect. I am getting used to that as I find the ability to hide text and/or images more valuable.

The jQuery Javascript Tabs Widget is fairly simple to use and exhibited no interference with other scripts and coding. Here are the top 3 features:
1)the HTML interface coding is very simple and easy to do;
2)if the code is ignored the default HTML layout is understandable - this helps debugging;
3)the collapsible and onmouseover properties are very useful;
4)the Tabs expand out even with dynamic addition of HTML blocks as here;
5)jQuery has Theme Styling Wizard to change look and feel of widgets.
The Downside to the jQuery Tab Widget:
1)Like other frameworks, jQuery Tab Widget is fragile when there are errors in HTML;
the resulting errors can be hard to debug; 2)Also adding CSS and HTML styling outside of the jQuery Tabs Widget conflicted with the Tabs CSS. This is the old namespace problem which it appears the Backbase Framework has one of the best implementations.

Here is demo-ed some jQuery Tab Widget features

One 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 -

 Home
JavaScript Links
jQuery Framework
W3CSchools
Overview/Sidebar
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.