FBML Essentials

Dynamic FBML Attributes

From within your FBML, you can apply special attributes to specific FBML and HTML tags that allow you to perform AJAX, dynamically hide and show elements, and other common JavaScript functions. The methods in this section offer you an easy way to get things done without having to worry too much about getting JavaScript to work in Facebook.

Visibility Attributes

With just a few attributes added to most elements in your FBML, you can dynamically allow the displaying and hiding of data upon a click of a mouse button. The following attributes can include more than one element ID, separated by commas:

clicktoshow

When the current element is clicked, the element IDs contained will switch to display:block.

clicktohide

When the current element is clicked, the element IDs contained will switch to display:none.

clicktotoggle

When the current element is clicked, the element IDs contained will switch between their existing state and display:none and vice versa, depending on the current state.

clickthrough

Set this to true when using radio buttons or checkboxes with which you want to use clicktoshow, clicktohide, or clicktotoggle. Not setting clickthrough="true" when using these elements will render the element inoperable.

Here are three examples that show how to use the visibility attributes:

<div id="example1" style="display:none">Visible</div>
<a href="#" clicktoshow="example1">Click here to make "Visible" 
    appear.</a>

<div id="example2">Visible2</div> <a href="#" clicktohide="example2">Click ...