Question

I am trying to do, something like this
You can see that collapsible DIV on right side of the page

This is what i have tried, for some reason i have used UserControl for this

<div class="widget-content">
<style type="text/css">
.w2bslikebox{background: url("/uploadedimages/_system/images/online-helpdesk.png") no-repeat scroll left center transparent !important;display: block;float: right;height: 192px;padding: 0 5px 0 39px;width: 213px;z-index: 99999;position:fixed;right:-218px;top:30%;}
.w2bslikebox:hover{background: url("/uploadedimages/_system/images/online-helpdesk-ov.png") no-repeat scroll left center transparent !important;}

.w2bslikebox div{border:none;position:relative;display:block;}
.w2bslikebox span{bottom: 12px;font: 8px "lucida grande",tahoma,verdana,arial,sans-serif;position: absolute;right: 0px;text-align: right;z-index: 99999;}
.w2bslikebox span a{color: gray;text-decoration:none;}
.w2bslikebox span a:hover{text-decoration:underline;}
.esn_searchTitle {
    color: #669613;
    font-size: 130%;
    font-weight: bold;
}
</style>
<div style="right: -218px;" class="w2bslikebox">
    <div id="Inner"> 
        <asp:Literal ID="ltlOnlineHelpdesk"  runat="server"></asp:Literal>
    </div>
</div>
</div>

I Bind the Literal control in codebehind.
Problem is, The DIV is not expanding on Mouse Over.

What am i missing ? Or there any other best way to do it, like shown in the URL ?

Answer 1

After Adding this, worked fine..

<script type="text/javascript">

        //<!--

        $(document).ready(function () { $(".w2bslikebox").hover(function () { $(this).stop().animate({ right: "0" }, "medium"); }, function () { $(this).stop().animate({ right: "-225" }, "medium"); }, 500); });

        //-->

</script>