---

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