JSFiddle - React, Tailwind, and code Playground

by redwall

HTML

<div id="box1">
    <button id="open" type="button">Open</button>
    <br />
    <br />
    <br />
    <iframe src="http://www.example.com" width="100%" height="170" frameborder="0" scrolling="no">
        <p>Your browser does not support iframes.</p>
    </iframe>
</div>

CSS

#box1 {
        position:absolute;
        bottom:0;
        height:50px;
        width:100%;
        background:#FF800D;
        overflow:hidden;
    }
    button {
        position:absolute;
        right:0;
    }

JavaScript

$(function () {
    $('#open').on('click', function () {
        $('#box1').animate({
            height: '230px'
        }, 500, function () {
            $('#open').text('Close').attr('id', 'close');
        });
    });

    $('#box1').on('click', '#close', function () {
        $('#box1').animate({
            height: '50px'
        }, 500, function () {
            $('#close').text('Open').attr('id', 'open');
        });
    });
});