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.