<style>
div#jsn-demo-builder-toggle {
    position: absolute;
    width: 580px;
    left: -495px;
    transition: all 0.6s ease;
    -moz-transition: all 0.6s ease;
    -webkit-transition: all 0.6s ease;
}
div#jsn-demo-builder-toggle > a:hover:not(.active) {
    left: -490px;
}
div#jsn-demo-builder-toggle.active {
    left: 0;
}
div#jsn-demo-builder-toggle > div,
div#jsn-demo-builder-toggle > a {
    float: left;
    cursor: default;
}
div#jsn-demo-builder-toggle > a {
    overflow: hidden;
}
div#jsn-demo-builder-toggle > a img {
    position: relative;
    left: -5px;
    transition: all 0.3s ease;
    -moz-transition: all 0.3s ease;
    -webkit-transition: all 0.3s ease;
    cursor: pointer;
}
div#jsn-demo-builder-toggle > a img:hover,
div#jsn-demo-builder-toggle > a.active img {
    left: 0;
}
div#jsn-demo-builder-toggle > div > iframe {
    background: #fff url(http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/extensions/custom-html/db-loading.gif) center center no-repeat;
    border-top: solid 10px #434448;
    border-right: solid 10px #434448;
    border-bottom: solid 10px #434448;
    border-left: none;
    border-bottom-right-radius: 5px;
}
div#jsn-demo-builder-toggle {
    margin: 0;
    padding: 0;
}
</style>
<div id="jsn-demo-builder-toggle">
    <div id="jsn-demo-builder-wrapper">
        <iframe id="jsn-demo-builder-iframe" width="480px" height="590"></iframe>
    </div>
    <a id="jsn-demo-builder-button" href="javascript:void(0);">
        <img src="http://demo.joomlashine.com/joomla-templates/jsn_boot/pro/images/extensions/custom-html/demo_builder_button_black.png" alt="Demo Builder Toggle" />
    </a>
</div>
<script type="text/javascript">
    var demoButton = document.getElementById("jsn-demo-builder-button");
    demoButton.addEventListener("click", function() {
        this.classList.toggle("active");

        var outDiv = document.getElementById("jsn-demo-builder-toggle");
        outDiv.classList.toggle("active");

        // Only load the iframe if the button is clicked as active and the iframe is not loaded
        if (this.classList.contains("active") && !outDiv.classList.contains("iframeloaded")) {
            // Load the iframe
            document.getElementById("jsn-demo-builder-iframe").src = "http://myjoomlashine.com/demo-builder/index.php?template=boot";
        }

        // Add an indicator that the iframe has been loaded, no reload if click the button again and again
        outDiv.classList.add("iframeloaded")
    }, false);
</script>