Untitled

<!DOCTYPE html>
<html>

  <head lang="fr-FR">

    <meta charset="utf-8">
    <title>floating/sliding bottom right panel </title>
      <script src="http://code.jquery.com/jquery-1.8.3.js"></script>
    <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/redmond/jquery-ui.css"/>
 
  <style>
	 
	#container {
		width: 220px;
		position: fixed;
		bottom: 0;
		right:0;
		border:1px solid #AAA;
	}

	.ui-clearfx {
		padding: .1em 1em;
	}

	#content {
		display: none;
		padding: 10px;
	}
	#header{
		margin: 0;
		border-bottom: 0;
		padding: .6em .2em 0.2em .2em;
	}
	#button{
		float:right
	} 
  </style>
  <script>
  $(function() {
   $("#button").click(function(e){
         $("#button>span")
		 .toggleClass("ui-icon-circle-triangle-n")
		 .toggleClass("ui-icon-circle-triangle-s");
        $("#content").slideToggle("slow");
        e.preventDefault();
		return false;
    });
  });
  </script>
   </head>
  <body>
    <div id="container" class="ui-widget-content ui-corner-top">
            <div id="header" class="ui-widget-content ui-widget-header ui-tabs-nav">
			  <span class=" ui-corner-top ui-clearfx">Ici un titre<span>
			  <a href="#" id="button" class="ui-button ui-widget ui-state-default ui-corner-all">
			     <span class="ui-button-icon-primary ui-icon ui-icon-circle-triangle-n">
			 </span>
			  </a>  
			</div>
            <div id="content" class="ui-widget-content" >
                <p> 
				ici le texte <br/>
				ici le texte <br/>
				ici le texte <br/>
				ici le texte <br/>
				ici le texte <br/>
				ici le texte <br/>
				ici le texte <br/>
				</p>
            </div>
        </div>
    
    
  </body>
  
</html>