Saludos, el asunto es que he modificado un script que usa MOOTOOLS y quiero que el DIV principal aparezca oculto cuando cargo la página.
Sencillamente lo que quiero es, que al hacer clic en un vinculo, aparezca un div y al hacer nuevamente clic en el mismo vinculo, este se oculte.
Actualmente lo tengo funcionando pero de modo inverso, es decir al cargar el Div esta visible y al hacer clic se oculta.
Codigo Javascript
:
window.addEvent('domready', function() {
var status = {
'true': 'Div Abierto',
'false': 'Div Cerrado'
};
//-vertical
var myVerticalSlide = new Fx.Slide('vertical_slide');
$('v_toggle').addEvent('click', function(e){
e.stop();
myVerticalSlide.toggle();
});
//Esto es una funcion que me muestra el status del DIV
// Cuando termina la transiciòn muestra el status
// note that complete will not affect 'hide' and 'show' methods
myVerticalSlide.addEvent('complete', function() {
$('vertical_status').set('html', status[myVerticalSlide.open]);
});
});
Codigo HTML:
<div id="contenedor">
<div class="marginbottom" id="menu">|
<a id="v_toggle" href="#">Click para abrir</a>
| <strong>status</strong>: <span id="vertical_status">open</span> </div>
<div id="vertical_slide">
Este texto deberia aparecer y desaparecer al hacer click sobre el boton..
</div>
</div>
Codigo CSS:
#vertical_slide, #horizontal_slide {
background: #D0C8C8;
color: #8A7575;
padding: 10px;
border: 5px solid #F3F1F1;
font-weight: bold;
width: 200px;
}
div.marginbottom {
Margin-bottom: 10px;}
#menu { width:200px; background-color:#999999; border:5px solid #F3F1F1;}
Gracias de antemano por la ayuda...