Reference Guide

facebook FBML Reference Guide Page 142 of 159

Dynamic FBML attributes

Summary

Visibility (clicktoshow, clicktohide,clicktotoggle)

Mock AJAX (clickrewriteid, clickrewriteurl,clickrewriteform)

Forms (clicktoenable, clicktodisable,clickthrough)

Requirelogin

FBJS

Details

DynamicFBML/Visibility

Description

These elements all control the visibility of an element or a set of elements.

Format is clickto*="id1,id2,id3".

clicktoshow - Sets the specified IDs to visible.

clicktohide - Hides the specified IDs

clicktotoggle - Will flip the visibility of the specified elements.

clickthrough - If true, allows checkboxes to change state, buttons to submit forms, etc.; if false, normal

behavior of the element is inhibited.

Examples

A live demonstration can be found here (Facebook login required, app login is not)

Show History</a>

<a id="hide_text" href="#" clicktohide="History, hide_text" clicktoshow="show_text"

style="display:none">Hide History</a>

THE STUFF TO DISPLAY

</div>

Notes

You can create elements that are hidden by default by giving them a style of display: none;. Note that it

must be inline, so attach style="display:none;" to your targeted tag, and don't declare it within an

externally called CSS file. It won't be switched on otherwise.

To use clicktohide and clicktoshow in a form with input type="radio" or input type="checkbox", make

sure you set clickthrough="true" as well otherwise the selection will not change when the user clicks on

them.

When used on a profile box or on any scrollable page, clicking the links as shown above will cause the

scroll position to jump to the top of the page (which is where the unnamed "#" bookmark is considered