TabToggle1 = function(element) {

  // This gives the active tab its look
  var tabs = $('principal_1').getElementsByTagName('span');
  //for(j = 0; j < tabs.length; j++) {
    link = tabs[0].getElementsByTagName('a')[0];
    link.id = "";
    tabs[0].id = "";
  //}
  element.id = "current"
  element.parentNode.id = "active"
  
  //Hide all content containers
  contents = document.getElementsByClassName('tabset_content');
  for(var i = 0; i < contents.length; i++) {
    contents[i].style.display = 'none';
  }

  //Extract content container id from href

  tabname = element.getAttribute('href').replace(/^.*\#/,'');
  ele = $(tabname);
  
  //Magic Happens
  new Effect.Appear(ele, { duration: 0.0 });
}

TabToggle2 = function(element) {

  // This gives the active tab its look
  var tabs = $('principal_2').getElementsByTagName('span');
  //for(j = 0; j < tabs.length; j++) {
    link = tabs[0].getElementsByTagName('a')[0];
    link.id = "";
    tabs[0].id = "";
  //}
  element.id = "current"
  element.parentNode.id = "active"
  
  //Hide all content containers
  contents = document.getElementsByClassName('tabset_content');
  for(var i = 0; i < contents.length; i++) {
    contents[i].style.display = 'none';
  }

  //Extract content container id from href

  tabname = element.getAttribute('href').replace(/^.*\#/,'');
  ele = $(tabname);
  
  //Magic Happens
  new Effect.Appear(ele, { duration: 0.0 });
}