simpletabmenu.jpg

Height transition es un efecto que cambia dinámicamente a la altura de un elemento. La mayoría de las veces esta transición se utilizan para ocultar o mostrar un elemento determinado en nuestra web. Mediante Height transition se utilizaran botones para activar la transición, y cuando se hace clic en un botón mostraremos el contenido determinado. Height transition nos permite además tener más de un elemento visualizado, ya que este no se vuelve a ocultar al abrir un nuevo elemento, sino que se oculta cuando nosotros lo hacemos también mediante los botones de acción.

Ver Demo - Descarga Ejemplo - Web solutoire

En nuestro encabezado

 

PLAIN TEXT
JavaScript:
<script type="text/javascript" src="archivos/mootools.js"></script>
<script type="text/javascript">
window.onload = function(){
//select the first button
var button1 = $('button1');
//select the second button
var button2 = $('button2');
//select the first content element
var content1 = $('contentElement1');
//select the second content element
var content2 = $('contentElement2');

//The height transition we attach to 'contentElement1'
var b1Toggle = new Fx.Style('contentElement1', 'height',{duration: 500});
//The height transition we attach to 'contentElement2'
var b2Toggle = new Fx.Style('contentElement2', '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(content2.getStyle('height').toInt()> 0){
    //hide
    b2Toggle.start(0);
  }else{
    //show
    b2Toggle.start(c2Height);
  }
  //toggle classname button2 <-> button2 button2_
  button2.toggleClass('button2_');
  return false;
});

//set css display:block for the contentElements
content1.setStyle('display','block');
content2.setStyle('display','block');

//get the scrollSize of the contentElements
var c1Height = content1.getSize().scrollSize.y;
var c2Height = content2.getSize().scrollSize.y;
};
</script>

Un poco de estilo CSS

PLAIN TEXT
CSS:
#contentElement1,#contentElement2{
    height:0px;
    font-size:10px;
    margin:0 auto;
    overflow:hidden;
}
#contentWrapper{
    margin:0px auto;
    padding:5px 40px;
    background:#d3e4a5;
    overflow:hidden;
}
#button1, #button2{
    display:block;
    height:14px;
    width:129px;
    float:left;
    margin-left:2px;
    background:#d3e4a5;
    cursor:pointer;
    text-align:center
}
.button1_,.button2_{
    font-weight:bold;
}
#button1{
    margin-left:40px;
}

Nuestro contenido

PLAIN TEXT
HTML:
<div id="contentWrapper">
    <div id="contentElement1">
      <div align="left">Contenido Botón 1<br>
        <br>
        <img src="logo.jpg" align="left" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus rutrum elit et nunc. Phasellus tincidunt pede in nibh. Maecenas eget ligula non dui nonummy venenatis.

Aliquam tempor nibh. In vitae nulla a turpis elementum fermentum. Phasellus fermentum. Maecenas blandit enim in lorem sollicitudin pretium. Sed gravida diam non nibh. Phasellus imperdiet convallis nulla. Maecenas pulvinar molestie sem. Etiam aliquet volutpat felis. Nullam risus. Nullam eget elit non tortor mollis rhoncus. </div>
  </div>
    <div id="contentElement2">Contenido Botón 2<br>
    <br>
<img src="logo.jpg" align="left" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Phasellus rutrum elit et nunc. Phasellus tincidunt pede in nibh. Maecenas eget ligula non dui nonummy venenatis.

Aliquam tempor nibh. In vitae nulla a turpis elementum fermentum. Phasellus fermentum. Maecenas blandit enim in lorem sollicitudin pretium. Sed gravida diam non nibh. Phasellus imperdiet convallis nulla. Maecenas pulvinar molestie sem. Etiam aliquet volutpat felis. Nullam risus. Nullam eget elit non tortor mollis rhoncus. </div>
 </div>
</div>
<div id="button1" class="button1">Botón 1 </div>
<div id="button2" class="button2">Botón 2</div>