WordPress - Tabbed Forms

I found this method to format a web page as a tab control as a part of MM Forms. Basically, parts of the page are placed in uniquely named div blocks. When the tabs are clicked, the code simply hides all but one of the blocks.

The tabs themselves are the elements of an unordered list. The stylesheet hides the list formatting and renders the anchor tags as boxes (tabs) on a single line. The list class is used to control the color of the currently selected tab.

Clicking on a "tab" calls the code that changes the visibility and color.


Defining the tab contents | Javascript code | Stylesheet | Defining the Tabs | Imbedding the files

Defining the tab contents

Each "page" of data needs to be enclosed in a uniquely named div block. Only one section should be the current_tab, the rest have their class set to inactive_tab. Any items you want displayed on all tabs (perhaps a submit button) can be placed either before or after the div blocks.

Testing shows that both div and span work.

Javascript code

Javascript code (from mmf-tabs.js) changes the tab colors and displays the associated div


Defining the Tabs

The tabs are defined as list elements - the stylesheet and javascript code will format these as tabs.

Each list element must be formatted like this

Imbedding the files

Both the javascript and stylesheet files should be included in the web page header. Please be sure to add the newline (\n) characters to help make the page human readable. Note that the newline character (\n) only works when placed in double quotes. If single quotes are used, it is simply printed without translation..

The last 2 echo commands could have also been entered as


Author: Robert Clemenzi
URL: http:// mc-computing.com / ISPs / WordPress / Tabbed_Forms.html