Edit in JSFiddle

window.addEvent('domready', function(){

    // cache the elements so we only select them once
  var rabbit = $('rabbit');
  var showRabbitBtn = $('show_rabbit');
  var hideRabbitBtn = $('hide_rabbit');
  var detachMagicBtn = $('detach_magic');
  var attachMagicBtn = $('attach_magic');

  // our functions to attach to the buttons
  var showRabbit = function(){
    rabbit.fade('in');
    showRabbitBtn.set('disabled', 'disabled');
    hideRabbitBtn.set('disabled', '');  
  };    

  var hideRabbit = function(){
    rabbit.fade('out');
    showRabbitBtn.set('disabled', '');
    hideRabbitBtn.set('disabled', 'disabled');  
  };

  // attach the events to the buttons
  showRabbitBtn.addEvent('click', showRabbit);
  hideRabbitBtn.addEvent('click', hideRabbit);
    
  // a little more advanced here
  var detachMagic = function(){
    showRabbitBtn.removeEvent('click', showRabbit);
    hideRabbitBtn.removeEvent('click', hideRabbit);

    detachMagicBtn.set('disabled', 'disabled');
    attachMagicBtn.set('disabled', ''); 
  };

  var attachMagic = function(){
    showRabbitBtn.addEvent('click', showRabbit);
    hideRabbitBtn.addEvent('click', hideRabbit);

    detachMagicBtn.set('disabled', '');
    attachMagicBtn.set('disabled', 'disabled'); 
  };
    
  detachMagicBtn.addEvent('click', detachMagic);
  attachMagicBtn.addEvent('click', attachMagic);

});

<button id="show_rabbit" disabled="disabled">showRabbit</button>
<button id="hide_rabbit">hideRabbit</button>
<button id="attach_magic" disabled="disabled">attachMagic</button>
<button id="detach_magic">detachMagic</button>
<p id="rabbit">I am a rabbit, believe it or not</p>

p#rabbit {
    background: #585858;
    margin-top: 10px;
    color: #fff;
    padding: 20px;
}

/* irrelevant */

body {
    font-family: helvetica;
}