ahi ya logré mas o menos lo que queria hacer, ahora solo me falta una funcion, que no se como hacerla, les copio mi codigo, y ejecutenlo si pueden para ver lo que hace.
Cita: <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>EJEMPLO</title>
<script type="text/javascript" src="http://localhost/prueba/system/application/javascript/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script>
$( function (){
$(".titulo").click(function(){
$(this).closest('.contenedor').find('.cuerpo').ani mate({
width: "396px"
}, 1500 );
});
$(".cuerpo").mouseout(function(){
$(this).animate({
width: "0px"
}, 1500, function(){
$(this).css({display:"none"});
} );
});
});
</script>
<style>
.titulo {margin: 0; padding: 0; background-color: yellow; width: 300px; float: left; height: 60px;}
.cuerpo {margin: 0; padding: 2px; background-color: navy; color: red; width: 0px; float: left; display: none; height: 60px;}
.contenedor {padding: 0; background-color: yellow; width: 700px; display: table; height: 60px;}
</style>
</head>
<body>
<div class="contenedor">
<div class="titulo">Titulo 1</div>
<div class="cuerpo">asdasdasdasd</div>
</div>
<div class="contenedor">
<div class="titulo">Titulo 2</div>
<div class="cuerpo">aasddddddddddd</div>
</div>
<div class="contenedor">
<div class="titulo">Titulo 3</div>
<div class="cuerpo">aasdddddddasdsd</div>
</div>
</body>
</html>
fijense que cuando hacen clic en un titulo se despliega un menú a su derecha, y cuando saco el mouse de ese menu ahi recien desaparece el menu. Lo que yo quiero hacer es en vez de usar un mouseout en el div cuerpo (menu) que se este mostrando, es que cuando haga clic en algun otro titulo se despliegue hacia la derecha su menu y se esconda al mismo tiempo el otro menu que ya estaba abierto.
A alguien se le ocurre alguna manera de hacer esto?
muchas gracias, y disculpen por editar tantas veces el post, es que voy probando todo el dia pero me trabo por ahi