DynamicFBML/Visibility

From Facebook Developer Wiki

Jump to: navigation, search

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.

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" 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 to be.) To prevent this from happening, use a bookmark name that does not exist, such as href="#nonexistentbookmark".
reference