DynamicFBML/Visibility
From Facebook Developers Wiki
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 IDsclicktotoggle- Will flip the visibility of the specified elements.clickthrough- Iftrue, allows checkboxes to change state, buttons to submit forms, etc.; iffalse, normal behavior of the element is inhibited.
Example
A live demonstration can be found here (Facebook login required, app login is not)
<a id="show_text" href="#" clicktohide="show_text" clicktoshow="History,hide_text">
Show History</a>
<a id="hide_text" href="#" clicktohide="History, hide_text" clicktoshow="show_text"
style="display:none">Hide History</a>
<div id="History" style="display:none">
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"orinput type="checkbox", make sure you setclickthrough="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 to be.) To prevent this from happening, use a bookmark name that does not exist, such as href="#nonexistantbookmark".
