Slider de nota con opción visible para abrir

[Pablo Ayala]

Hola ceaped....

Te paso un ejemplo que tendras que mejorar de acuerdo a tus necesidades,

Código CSS:

#contenedor{
                position: fixed;
                bottom:0;
                right: 0;
                width: 660px;
            }
        
            #mensaje{
                width: 500px;
                height: 250px;
                background-color: yellow;
                float: right;       
                /*margin-right: -500px;*/        
            }
            
            #activa{
                cursor:pointer;
                float:right;
                color:red;
                font-size: 18px;
                margin-right: 20px;
            }
 

Código HTML:

<div id="contenedor">       
        <div id="mensaje">Aquí tu mensaje</div>
        <div id="activa">Cerrar mensaje</div>
        </div>
 

Código Javascript:

$(document).ready(function(){
                contador = 0; 
                $("#activa").click(function(){                  
                    $('#mensaje').animate({
                         width: "toggle"                         
                      }, 500, function() {
                           if (contador == 0){
                                $("#activa").html("Ver mensaje");
                                contador++;
                           }else{
                                $("#activa").html("Cerrar mensaje");
                                contador--;
                           }                       
                           
                      });               
                });
            });
 

Espero que te sirva,

Saludos