title: show and hide div from bottom to top
body: <p>I have this example with a div which show / hide from the top, but I need it from the bottom to the top, I was trying to change some code, but I couldn't, and I didn't find any example.</p>
  
  <pre><code>&lt;style type="text/css"&gt;
  
  #top-panel{
      background:#cc22ff;
      border-bottom:3px solid #a6c34e;
      padding:14px 20px;
      text-align:right;   
  }
  #sub-panel{
      text-align:center;
  }
  #sub-panel a{
      width:150px;
      float:right;
      color:#FFFFFF;
      text-decoration:none;
      margin-right:30px;
      font-weight:bold;
      background:url(img/sub-left.png) bottom left no-repeat #a6c34e;
  }
  #sub-panel a span{
      padding:6px;
      background:url(img/sub-right.png) right bottom no-repeat;
      display:block;
  
  }
  strong{color:#000000;}
  .face{border:solid 2px #a6c34e; margin-left:10px; float:right;}
  :focus{outline:0}
  &lt;/style&gt; 
  
  
  &lt;script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
  $(document).ready(function(){
      // Lets make the top panel toggle based on the click of the show/hide link  
      $("#sub-panel").click(function(){
          // Toggle the bar up 
          $("#top-panel").slideToggle();  
          // Settings
          var el = $("#shText");  
          // Lets us know whats inside the element
          var state = $("#shText").html();
          // Change the state  
          state = (state == 'Hide' ? '&lt;span id="shText"&gt;Mostrar&lt;/span&gt;' : '&lt;span id="shText"&gt;Ocultar&lt;/span&gt;');                    
          // Finally change whats insdide the element ID
          el.replaceWith(state); 
      }); // end sub panel click function
  }); // end on DOM
  &lt;/script&gt; 
  
  
  &lt;div id="top-panel"&gt;
  &lt;strong&gt;titulo&lt;/strong&gt;&lt;br /&gt;
  contenido
  &lt;/div&gt;
  &lt;div id="sub-panel"&gt;&lt;a href="#" id="toggle"&gt;&lt;span id="shText"&gt;Ocultar&lt;/span&gt;&lt;/a&gt;&lt;/div&gt; 
  </code></pre>