mootools php faith camera linux

mootools

Version 1.11 Toggle



Here is an example of how to toggle() in mootools version 1.11:


<span style="cursor:hand;cursor:pointer;" id="howtolink">How-To Tutorial (click to open)</span>

<
div id="howto" style="text-align:center;visibility:hidden;position:absolute;">
Here's my tutorial: blah, blah, blah!
</div>

<script type="text/javascript" language="javascript">

// get the original inner html (text)
var htmlstart = $('
howtolink').getText();

// add the event to the link
$('
howtolink').addEvent('click',function() {

  // pickup the variables we need to toggle
  var p = $('
howto').getStyle('position');
  var v = $('
howto').getStyle('visibility');
  // set the variables we will need to toggle
  var position = (p!='
absolute') ? 'absolute' : 'relative';
  var visibility = (v!='
hidden') ? 'hidden' : 'visible';

  // curious about the last four lines?  
  // uncomment this alert:
  //alert(position+' '+p+'
'+visibility+' '+v);

  // do the toggle
  $('
howto').setStyles({'position':position, 'visibility':visibility});

  // update the inner html (text) so that it makes sense
  var html = (position=='
absolute') ? 'Close Tutorial' : htmlstart;
  $('
howtolink').setText(html);
});
</script>



There you have it. And do checkout 1.2's ability to toggle() any Moo Element!

Last Updated: 2009-07-09 12:14:14
Creative Commons License Jay Johnston is a Zend Certified Engineer in PHP 5 LPI-ID: LPI000102450, Verfication Code: wmnnt56y2k  ... Jay Johnston is certified as LPIC-1 by the Linux Professional Institute