Como conseguir este efecto

neodani · #1 (**permalink**) 01/06/2010, 02:27

Buenas,

Me gustaría saber como conseguir este efecto.

http://en.vtiger.com/index.php?actio...enttab=Support

Si os fijáis cuando pulsas sobre la flecha azul muestra el contenido y cuando se vuelve a pulsar

Ticket Information

Description Information

Solution Information

Como consiguen el efecto de mostrar una flecha u otra?

Me gustaría conseguir este efecto con JQUERY...

Muchas gracias de antemano!

mayid · #2 (**permalink**) 01/06/2010, 08:28

Se usan sprites: una imagen que se corre cambiando las coordenadas x-y

http://pixeels.com/css-sprites
http://www.phperos.net/foro/index.php?topic=4760.0

neodani · #3 (**permalink**) 01/06/2010, 09:25

Cita:

Iniciado por mayid

Se usan sprites: una imagen que se corre cambiando las coordenadas x-y

http://pixeels.com/css-sprites
http://www.phperos.net/foro/index.php?topic=4760.0

Pero es el hacer clic, sobre la imagen y que a continuación muestre una capa que estaba oculta y la imagen que has hecho el clic se convierta en la otra. Todo el proceso no se puede hacer solo con los sprites, como ta hecho?!

neodani · #4 (**permalink**) 01/06/2010, 13:44

Cuando el menu está colapsado tiene una imagen y cuando se despliega aparece otra. Eso se puede definir de alguna manera?

Pongo un ejemplo que he visto lo mismo con un menú desplegable.

http://www.dynamicdrive.com/dynamicindex1/slashdot.htm

Lo que pasa es que yo lo quiero aplicar a una simple capa como en el ejemplo del VTIGER

http://en.vtiger.com/index.php?actio...enttab=Support

¿Alguien sabe como hacerlo?

Gracias de antemano!

neodani · #5 (**permalink**) 01/06/2010, 14:45

Lo conseguí!

Dejo el ejemplo
http://fdw.neodani.com/jquery/mostra...r/ejemplo1.php

Y aquí el código:

Código HTML:

Ver original<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>JQuery Collapse</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function()
{
    $(".titulo a").click(function(event) {
        event.preventDefault();
        $(this).toggleClass('open').siblings().removeClass('open').end();
        $("#caja").toggle();
    });
 
});
</script>
<style type="text/css">
body {
    font-family: Verdana, Arial, Helvetica, sans-serif;
    font-size: 11px;
    color: #666666; 
}
#box{
    width:400px;
}
 
a{color:#000; text-decoration:none;}
#caja {
    display: none;
    padding:5px;
    border:2px solid #ccc;
    background-color:#eee;
}
 
.titulo {
    background:url("inner.gif") repeat-x scroll center bottom #DDDCDD;
    border:1px solid #DEDEDE;
    color:#000000;
    padding:8px;
    font-weight:bold;
}
.titulo a.open{
    background:url("inactivate.gif") no-repeat 0px -2px;
    padding-left:25px;
    height:20px;
    outline:0;
}
.titulo a{
    background:url("activate.gif") no-repeat 0px -2px;
    outline:0;
    padding-left:25px;
}
</style>
</head>
<body>
<div id="box">
    <div class="titulo"><a class="open" href="#"></a>Ticket Information</div>
    <div id="caja">
    <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren</p>
    </div>
</div>
</body>
</html>

Saludos!