window.onload = function(){
		
	//select the first content element
	var content1 = $('contentElement1');
	
	//select the first button
	var button1 = $('button1');
	;
	
	//select the first button
	var button2 = $('button2');
	;

	
	
	//The height transition we attach to 'contentElement1'
	var b1Toggle = new Fx.Style('contentElement1', 'height',{duration: 500});
	var b2Toggle = new Fx.Style('contentElement1', 'height',{duration: 500});
	
	
	//add an onclick event listener to button1
	button1.addEvent('click', function(){
	  //toggle height transition (hide-show)
	  if(content1.getStyle('height').toInt() > 0){
	    //hide
	  b1Toggle.start(0);
	  }else{
	    //show
	    b1Toggle.start(c1Height);
	  }
	  //toggle classname button1 <-> button1 button1_
	  button1.toggleClass('button1_');
	  return false;
	});
	
		//add an onclick event listener to button2
	button2.addEvent('click', function(){
	  //toggle height transition (hide-show)
	  if(content1.getStyle('height').toInt() > 0){
	    //hide
	  b2Toggle.start(0);
	  }else{
	    //show
	    b2Toggle.start(c1Height);
	  }
	  //toggle classname button1 <-> button1 button1_
	  button2.toggleClass('button2_');
	  return false;
	});
	
	
	//set css display:block for the contentElements
	content1.setStyle('display','block');
	
	//get the scrollSize of the contentElements
	var c1Height = content1.getSize().scrollSize.y;
	};