Showing and Hiding Divs in Facebook FBML

By the way, Facebook provides a simple way to open and close divs on a page. Its fairly limited though. I couldn't figure out how to use it in response to selecting an option from a dropdown list.

But if you want to open or close a div whenever a particular link is clicked, all you need do is add a "clicktoshow" or "clicktoshow" attribute to the anchor tag for a ink.

This code presents the "link_only" div initially. Clicking the link it creates will hide this div and present the "link_and_about" div.

<div id="link_only">
<a href="#" clicktohide="link_only" clicktoshow="link_and_about">What is this?</a></div>
<div id="link_and_about" style="display: none;">
About text
<a href="#" clicktohide="link_and_about" clicktoshow="link_only">Ok</a></div>

The value for these attributes can be a single div id or a list of them separated by commas.

There's also a "clicktotoggle" attribute you can use for a link that will always be available.

It would be nice if you could call a javascript method from a form element that could open and close the same divs. Haven't found an easy way to do this myself, but this post has some code that could be called to simulate a click.

This code won't work as is on Facebook though, as the createEvent method is undefined. FBJS does have some event listener functionality; perhaps this code be used to make that happen. Of course, this complexity is probably more trouble than what I did above.

Javascript for Facebook

Image via WikipediaJust spent some time with Facebook's Javascript replacement, FBJS. Its a must if your Facebook app has complex things to do.

FBJS rewrites all of your method and variable names so your code is confined to a sandbox and cannot mess with any of Facebook's code.

This renaming confines your code to a document called "aXXXXX.document", where "XXXXX" has to be your Facebook app's numeric id. So if you have this code:

document.getElementById('choice2_info')

Facebook changes it to this:

a19756161464_document.getElementById('choice2_info')

You can see this if you look at the source for the page finally presented by Facebook.

You'll also see that the id attributes for HTML elements are also changed in the page source. The original attribute may have been:

id="choice1_option_id"

but is actually rendered as:

id="app19756161464_choice1_option_id"

When using making use of methods and id, your code should use the originals, not the replacements. The FBJS version of getElementById will add the appropriate prefix to whatever you pass it, so it will look for an element with the id "app19756161464_app19756161464_choice1_option_id" if you prepend the id first.

FBJS also requires that you use different method names than you would if you are writing straight Javascript. For example, instead of using ".target" to look at or change an element's target, you use ".getTarget" or ".setTarget".

You can see a list of the methods affected here. There is much more on FBJS on that page and I highly recommend reading and understanding the material there before beginning a project.

If you do anything complex, you'll probably want to use a tool like Firebug to set breakpoints and watch the values of key expressions. I had a lot of trouble with the newest version, but version 1.2.2 worked fine.