Expand/Contract Box

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>
    
    <div id="togglebox">
        
        <img src="http://avatar.hq-picture.com/avatars/img21/cat_singing_avatar_picture_50773.jpg" style="float: left;"/>
        
        <p>Click on the 'minus' sign to hide the content.</p>
        
        <p>This could go as long as you want. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc fringilla quam eu tortor vestibulum eu scelerisque nisi molestie. Ut eleifend ullamcorper ornare. Ut posuere tempor hendrerit. Curabitur faucibus lobortis viverra. Duis ac est ipsum, sed iaculis nisi. Cras eget leo eu ante vehicula lobortis et sit amet nulla. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Sed ligula massa, varius nec porttitor at, scelerisque et ipsum. Praesent sagittis malesuada tristique. Curabitur quis nunc sit amet eros venenatis vestibulum vel eget neque. Vivamus ipsum est, congue non rutrum eget, dapibus at metus.</p>
        
        <p><a href="#">You can put anything inside this box!</a></p>
        
        <input type="button" value="I am a button!"/>
        
    </div>    
</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;
}

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

#anim_box img { padding: 10px; }

#anim_box a {
    color: #39F;
}

#anim_box a:hover {
    color: #FFF;
}

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

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

#anim_box #togglebox { display: none; }

JavaScript

// define first variables needed for the function
var contract_txt = "Hmm, what's inside?"; //text when the box is contracted
var expand_txt = $('h2').text();

function defaultBox() {
    $('#anim_box').css({
        width: '200px',
        marginLeft: '0'
    }).prepend('<a class="sizing" href="#">[-]</a>');
    $('h2').text(contract_txt).css("marginBottom", "0");
    $('.sizing').text("[+]");
}

defaultBox();

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