Collapsing and opening a div via a close button

Question

I am trying to build using javascript a panel that expands out of the right side of the browser window, in which it will hold information. I have managed to get the div to expand on click but I need it to expand on hover, and also close with an x in the corner to return to its original state.

http://jsfiddle.net/8zGp9/

I hope this is clear, my Fiddle is above.

<div> </div>

Answer 1

Use hover. The first function will take action on hover and the second when you hover out. See example

$("#slidingpanel").hover(function(e){
    $(this).animate({
        width: 200
    },100);
},function(e){
    $(this).animate({
        width: 30
    },100);
});

If you want to close your div on click only you can try this:

$("#slidingpanel").hover(function(e){
    $(this).animate({
        width: 200
    },100);
    $("#closeButton").css("display", "inline-block");    
});

$("#closeButton").click(function(){
    $("#slidingpanel").animate({
        width: 30
    },100);
    $(this).css("display", "none").delay(200);
});

Working example

I located the X outside because if it's inside once you clicked it and moved the mouse, the hover will be fired again.

Answer 2

use hover function of jQuery. the code is just a example, you need to fix the x positione and deal with the div width : http://jsfiddle.net/8zGp9/4/

html:

<div id="slidingpanel">  
        <div id="closepanle">x</div>
</div>

css:

#slidingpanel {
position: fixed;
width: 30px;
height: 200px;
z-index: 1;
right: 0px;
border:1px solid black;
}
#closepanle{
   position: inherit; 
   cursor:pointer;
   top:1;
}

js:

$("#slidingpanel").hover(function(){
  expandDiv(this);
 });
$("#closepanle").click(function(){
    closeDiv("#slidingpanel");
});

 function expandDiv(selector){    
    $(selector).animate({
        width: 200
    },100);
 }

 function closeDiv(selector){    
    $(selector).animate({
        width: 30
    },100);
 }