Edit in JSFiddle

$(function()
  {
      var expanded = false;
      $('#flip').click(function(){
          $("#panel").slideToggle("slow");
      });
  });
<div id="mainContainer">
    <div id="flip">Click to slide the panel down or up</div>
    <div id="panel" class="sidebar">sidebar</div>
    
</div>
<iframe id="iframe1" src="http://jqfaq.com/AdPage.html" style="width:100%; height:115px; border:none;"/>
#panel
{
padding:50px;
display:none;
height: 200px;
width: 100%;
background-color: lime;
}

#panel,#flip
{
 padding:5px;
 text-align:center;
 border:solid 1px #c3c3c3;
 display
}

#mainContainer
{
    width: 610px;
    height: 100%;
    overflow: hidden;
}

External resources loaded into this fiddle: