How can I toggle the visibility of elements?

Published on and tagged with javascript  programming  tip

If you work with the Prototype Javascript Framework (you need this framework if you want to use the Ajax functionality of CakePHP), it is very easy to toggle the visibility of elements. A simple example (CakePHP 1.1):

<?php echo $html->checkbox('MyCheckbox', null, array('onclick' => "Element.toggle('message');")); ?>
<div id="message" style="display: none;">
Checkbox is selected.
</div>

And with CakePHP 1.2:

<?php echo $form->checkbox('MyCheckbox', array('onclick' => "Element.toggle('message');")); ?>
<div id="message" style="display: none;">
Checkbox is selected.
</div>

Update 2009-01-21: Added CakePHP 1.2 example and fixed the bug mentioned by Dieter.

2 comments baked

  • Dieter@be

    There is a ” missing on line 2.

    Also, $html->checkbox doesn’t exist anymore in cake 1.2

    Other then that, still useful after 3 years :-)

  • cakebaker

    @Dieter: Woohoo, the first comment after three years ;-)

    Thanks for the hint about the missing “, it is now fixed. I also added the example code for CakePHP 1.2.

Bake a comment




(for code please use <code>...</code> [no escaping necessary])

© daniel hofstetter. Licensed under a Creative Commons License