plynule rozevírání položky ze strany

<div style="overflow: visible; position: fixed;  height: 215px; left: 0px; z-index:1000;">

    <div id="garance" style="overflow: visible; width: 388px; height: 210px; display: none; float:left"><h2>
    <span style="font-size:24px;"> 100%</span><br>
    GARANCE K ZAKÁZKÁM
</h2>
        Pokud dodržíte naše TIPY tak získáte minimálně
        5-10 zakázek ročně. V případě, že se Vám to,
        bohužel, nepovede, tak Vám provozovatel touto
        100% garancí poskytne další bezplatné období
        sdílení VIP přístupů do té doby dokud uvedený počet
        zakázek nezískáte + naše poradenství zdarma.
</div>
    <div onclick="jQuery('#garance').animate({width:'toggle'},1200); jQuery('#otevrit,#zavrit').toggle();" style="cursor :pointer; float:right">
       
         <div id="otevrit" style="width: 50px; height: 210px;">  
             <p><nobr>100% GARANCE ZAKÁZEK</nobr></p>
</div>
        <div id="zavrit" style="width: 50px; height: 210px; cursor: pointer; display: none; float:right"><p><nobr>100% GARANCE ZAKÁZEK</nobr></p></div>

    </div>
</div>

otevrit, #zavrit{

    background: yellow;


 margin-top:-5px;  
-moz-border-radius-topright: 20px;
-webkit-border-top-right-radius: 20px;
border-top-right-radius: 20px;
-moz-border-radius-bottomright: 20px;
-webkit-border-bottom-right-radius: 20px;
border-bottom-right-radius: 20px;
font-size:14px;
font-weight:bold;
padding-top:20px;
-webkit-box-shadow: 2px 2px 5px 0px rgba(50, 50, 50, 0.75);
-moz-box-shadow:    2px 2px 5px 0px rgba(50, 50, 50, 0.75);
box-shadow:         2px 2px 5px 0px rgba(50, 50, 50, 0.75);
}
#otevrit p, #zavrit p{
-webkit-transform: rotate(90deg);
-moz-transform: rotate(90deg);
-o-transform: rotate(90deg);

}

#garance{
  
    background: #FFFFCC;
    padding: 5px;

    font-weight:bold;
    font-size: 14px;
    text-align:justify;
border: 1px solid #ddd;
    
}
#garance h2{
font-size:20px;
color:black;
font-weight:bold;
text-align:center;
margin: 0px 0 0 0px;
}