JSFiddle - React, Tailwind, and code Playground

A simple jQuery script for expanding/contracting a box.

by iamacatperson

HTML

<div id="anim_box">
    
    <h2>I can put whatever here</h2>
    
    <p>Click on the 'minus' sign to see the box contract.</p>
    <p><a href="#">You can put anything inside this box!</a></p>
    
    <input type="button" value="I am a button!"/>
    
    <a class="sizing" href="#">[-]</a>
    
</div>

CSS

#anim_box {
    width: 300px;
    height: 150px;
    background: #333;
    border: 2px solid #999;
    color: #FFF;
    padding: 10px;
    -moz-border-radius: 10px;
    position: relative;
    margin-left: 30px;
}

#anim_box p {
    font: 12px Verdana, Geneva, sans-serif;
}

#anim_box h2 {
    font: bold 14px Verdana, Geneva, sans-serif;
}

input {
    background: #69C;
    color: #333;
    font-weight: bold;
    border: 1px solid #003;
    padding: 10px;
    cursor: pointer;
    -moz-border-radius: 10px;
}

a {
    color: #39F;
}

a.sizing {
    text-decoration: none;
    position: absolute;
    top: 5px;
    right: 10px;    
    cursor: pointer;
}

p, h2 { margin-bottom: 15px; }

JavaScript

$(document).ready(function() {
    var contract_txt = "Box is contracted."; //text when the box is contracted
    var expand_txt = $('h2').text();
    
    $('.sizing').toggle(function() {
        $('#anim_box').animate({
            width: '200px',
            height: '20px',
            marginLeft: '0'
        }, 1000, 'easeOutBounce');
        $('input, p').fadeOut();
        $('h2').text(contract_txt);
        $(this).text("[+]");
    }, function() {
        $('#anim_box').animate({
            width: '300px',
            height: '150px',
            marginLeft: '30px'
        });
        $('input, p').fadeIn();
        $('h2').text(expand_txt);
        $(this).text("[-]");
    });
});