Ya... y con respetando las "transiciones" que con display:none no se respetan:
http://jsfiddle.net/boctulus/gg3Az/2/
Código Javascript
:
Ver original<style>
.testWrapper {
width: 400px;
height: auto;
background: #272727;
overflow: visible;
padding: 50px;
color: white;
}
.div_1b_y2b {
position: relative;
left: 10.3%;
width: 79%;
border: 1px solid white;
overflow: hidden;
-webkit-transition: all ease 1s;
}
#div1b,#div2b {height: 0px;}
</style>
<div class="testWrapper">
<div id="div1a" onclick="toogle(this,'div2a');">
<div>
Click aquí 1
</div>
</div>
<div id="div1b" class="div_1b_y2b">
Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos.
</div>
<!-- ............................. -->
<div id="div2a" onclick="toogle(this,'div1a');">
<div>
Click aquí 2
</div>
</div>
<div id="div2b" class="div_1b_y2b">
Lorem ipsum ad his scripta blandit partiendo, eum fastidii accumsan euripidis in, eum liber hendrerit an. Qui ut wisi vocibus suscipiantur, quo dicit ridens inciderint id. Quo mundi lobortis reformidans eu, legimus senserit definiebas an eos.
</div>
</div>
<script type="text/javascript">
function toogle(me,other)
{
other = document.getElementById(other.replace(/a/, "b"));
me = document.getElementById(me.id.replace(/a/, "b"));
if (me.clientHeight==0 && other.clientHeight==0){
me.setAttribute("style","height: 160px");
}else{
me.setAttribute("style","height: 160px");
other.setAttribute("style","height: 0px");
}
}
</script>
HISTORIAL DE CAMBIOS (que me acuerde)
- Se rehizo el JS acomodandose a los "estandares" de hacer una funcion llamada toogle()
- Se agrego a los CSS: #div1b,#div2b {height: 0px;}
- Se cambio el onclick concistentemente con la nueva funcion en JS
Seguramente llegaran a decirme que DEBO registrar el evento onclick en vez de usar onclick inline y tienen razon! solo que como es un caso tan particular de toogle() y el HTML ya venia con un onclick inline... pues lo deje asi