JSFiddle - React, Tailwind, and code Playground

A simple jQuery script for expanding/contracting a box. I am sure there's a simpler way of coding this. I'm still learning! :D

by iamacatperson

HTML

<div id="anim_box">
    
    <h2>Nothing much.</h2>
    
    <p>Click on the 'minus' sign to hide the content.</p>
    
    <p>This could go as long as you want.</p>
    <p>This could go as long as you want.</p>
    <p>This could go as long as you want.</p>
    <p>This could go as long as you want.</p>
    <p>This could go as long as you want.</p>
    <p>This could go as long as you want.</p>
    <p>This could go as long as you want.</p>
    <p>This could go as long as you want.</p>
    <p>This could go as long as you want.</p>
    <p>This could go as long as you want.</p>
    <p>This could go as long as you want.</p>
    <p>This could go as long as you want.</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;
    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 = "Hmm, what's inside?"; //text when the box is contracted
    var expand_txt = $('h2').text();

    $('#anim_box').css({
        width: '200px',
        marginLeft: '0'
    });
    $('input, p').hide();
    $('h2').text(contract_txt).css("marginBottom", "0");
    $('.sizing').text("[+]");

    $('.sizing').toggle(function() {
        $('#anim_box').animate({
            width: '300px',
            marginLeft: '30px'
        });
        $('input, p').fadeIn();
        $('h2').text(expand_txt).css("marginBottom", "15px");
        $(this).text("[-]");
    }, function() {
        $('#anim_box').animate({
            width: '200px',
            marginLeft: '0'
        }, 1000, 'easeOutBounce');
        $('input, p').hide();
        $('h2').text(contract_txt).css("marginBottom", "0");
        $(this).text("[+]");
    });
});