Foros del Web - Ver Mensaje Individual - Ejecutar varias funciones jquery en un mismo boton o enlace

Naahuel · #6 (**permalink**) 17/06/2011, 16:04

Ups, entendí mal. Esto es lo que querías?

Código HTML:

Ver original<html>
<html>
<head>
<style>
  .cerrado:after{
    content:'  (+)';
  }
  .expandido:after{
    content: '  (-)';
  }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#subirbajar").toggle(function(){
    $(this).removeClass('cerrado').addClass('expandido');
    $(".captura").stop().animate({height:500},"slow");
  }, function(){ 
    $(this).removeClass('expandido').addClass('cerrado');
    $(".captura").stop().animate({height:150},"slow");
  });
});
</script> 
</head>
<body>
  <span id="subirbajar" class="cerrado">Bajar / Subir</span>
<br />
<div class="captura" style="height:150px;width:200px;position:relative;border: 5px solid #afafaf; background:#c1c1c1">
</body>
</html>

Claro que estoy usando :after en CSS sólo para que lo veas, pero si lo querés hacer más compatibles con navegadores viejos podés usar imágenes de fondo:

Código CSS:

Ver original.cerrado{
    background:url(imagen-con-mas.jpg);
  }
  .expandido{
    background:url(imagen-con-menos.jpg);
  }