Section
Sections are a main part of our UI. They exist in the left and right columns, and they can exist in the center column to help organized data.
Sections have a twisty to indicate expand/collapse state, but should be expandable and collapseable when you click anywhere on the section header.
For draggable sections (optional), a drag handle shows up on hover over the section title.
The draggable version of this component contains onmouseover and onmouseout handlers for IE 6. However, the CSS is still in place for when we can drop IE 6 support.
We haven't programmed the arrow to flip in this example when image are turned off. Use ◄ for the right-to-left closed arrow alternate text.
Variations
Classes
- lotusSection - the wrapping container
- lotusSectionBody - this class goes on a container around the body of the section (minus the header).
- lotusDragHandle - this class is for a drag handle that shows to the left of the section header.
- lotusSubsection - used when you have a subsection within a section
- lotusChunk - used for proper vertical spacing of content (leaves space in between adjacent chunks of elements)
- lotusIcons - this class allows you to put multiple icons in a header.
Basic Implementation
Section headers use h2 tags.
There is a twisty icon to the left of the header text for indicating expand/collapse. Clicking anywhere on the header expands/collapses it.
There is an action icon to the right of the header text which gives you a menu of options.
The content, under the header, is wrapped in a div with the class of lotusSectionBody.
Sections can contain subsections.
lotusChunk is used on divs to create vertical space when needed.
Additional components, like lists and tagClouds, appear inside sections. Their class names were not included, even though some adjustments are made to them depending on what column/section they are in. See the code on the example pages.
Variations
If a section is draggable, the general .lotusDraggable class is applied to the h2 tag. Put a span with class of lotusDragHandle as the first element in the h2 tag. Put an tag inside the span.
Examples
Sample HTML
Sample HTML - Variation
CSS (section.css)
Theme CSS (sectionTheme.css)
History of component
6/11/09: Added high contrast open and closed arrows.
Addition of drag handle on hover for draggable widgets.
Sections typically looked different depending on what column they were in. Now we have primary and secondary "widgets" which are built the same way and include the section code as a wrapper. (This is separate from our homepage widgets.)
Sections in the right column were not expandable and collapsable. Sections in the left column and main content area had the option of a twisty to expand and collapse. Now all sections can be expanded/collapsed.