hey ,
got the i answer i was looking for and here is the code to slide a input or a panel form right to left
<h:form id="form1">
<rich:panel header="Dashboard" id="layoutPanel1" styleClass="parentPanel">
<rich:panel id="layoutPanel2" style="height: 40px; left: 960px; top: 192px; position: absolute; width: 40px">
<rich:effect for="layoutPanel2" name="morphpanel1" type="Morph" params="duration:0.4"/>
<rich:effect for="inputText1" name="morphtextbox1" type="Morph" params="duration:0.4"/>
<h:graphicImage onmouseover="morphpanel1({ style: 'left:800px ; width: 200px;'}),showtextbox(),morphtextbox1({ style: 'width: 150px;'})" style="height: 30px; left: 3px; top: 0px; position: relative; width: 30px" id="filter1" value="/resources/images/find.gif"/>
<h:inputText onmouseout="morphtextbox1({ style: 'width: 0px;'}),hidetextbox(),morphpanel1({ style: 'left:960px ; width: 40px;'})" style=" display:none ; right: 0px; top: 4px; position: absolute; width: 0px" id="inputText1" />
<rich:effect for="inputText1" name="showtextbox" type="Appear" params="duration:0.1"/>
<rich:effect for="inputText1" name="hidetextbox" type="Fade" params="duration:0.1"/>
</rich:panel>
</rich:panel>
</h:form>
thanks jBoss for richfaces its quite cool and easy