Skip to main content link. Accesskey S

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.

Directionality:

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.

Wrap the section header text in a link if you want the header clickable, also.

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.

May 2010: Removed cursor from header text. Wrap the header text in a link if you want it clickable (which will also trigger the cursor). Changed the draggable section to wrap the header text in a link.

See Also:

IBM, the IBM logo, ibm.com and Lotus are trademarks of International Business Machines Corp., registered in many jurisdictions worldwide. Other product and service names might be trademarks of IBM or other companies. A current list of IBM trademarks is available on the Web at "Copyright and trademark information" at www.ibm.com/legal/copytrade.shtml.