JSFiddle - React, Tailwind, and code Playground

HTML

<script type="text/javascript" language="javascript" src="http://code.jquery.com/jquery-1.7.2.min.js"></script>

<h1> THIS IS A SAMPLE PAGE</h1>

<hr />

<table border="0" cellpadding="0" cellspacing="0" width="100%"><tr align="left"><td align="left"><iframe width="100%" frameborder="0" height="770" id="myframe" runat="server" src=http://www.education.gov.yk.ca/pdf/pdf-test.pdf  scrolling="no" frameborder="0"   ></iframe></td></tr></table>


<div id="myParentDiv">

<div class="slideout">
    <div id="slidecontent">Your Content!</div>
    <div id="clickme"></div>
</div>

<iframe style="background: #666;position: absolute; width: 300px;height: 80px;top: 45%;left: -280px;" src="about:blank"></iframe>

</div>

CSS

.slideout
{
    background: #666;
    position: absolute;
    width: 300px;
    height: 80px;
    top: 45%;
    left: -280px;
    z-index:10;
}
#clickme
{
    float: right;
    height: 80px;
    width: 20px;
    background: #ff0000;
}
#slidecontent
{
    float: left;
}

JavaScript

$(function () {
$('#clickme').toggle(function () {
    $(this).parent().animate({ left: '0px' }, { queue: false, duration: 500 });
}, function () {
    $(this).parent().animate({ left: '-280px' }, { queue: false, duration: 500 });
});
});