css - What is alternative to use after jQuery 1.9 removed .toggle(function,function)?

Question

Hi i'm trying to create something that will alternate shrinking and growing on every click, but i'm using jQuery 1.9 for my website. the .toggle(function,function) function was removed from jQuery 1.9, so I'm not really sure what I should use instead.

Any help would be great.

Thanks

jsfiddle (uses old code, the jquery 1.8 version): http://jsfiddle.net/TNAC6/

new jsfiddle (jquery 1.9): http://jsfiddle.net/TNAC6/1/

Here is my code I'm trying to make toggle. Basically the thing i'm toggling is a circle div.

(function($){
    $.fn.createToggle = function(size) {
        var ele = $(this);
        var oldSize = ele.width();
        console.log("creating new toggle on element: " + ele + " old: " + oldSize + " new: " + size );
        console.log("its content is" + ele.children(".content"));
        var growfn = function() {
            $(this).stop().animate({
                'width': size+'px',
                'height': size+'px',
                'margin-left': '-'+(size/2)+'px',
                'margin-top': '-'+(size/2)+'px'
            }, 500);
            $(this).children(".content").toggle();
        };
        var shrinkfn = function() {
            $(this).stop().animate({
                'width': oldSize+'px',
                'height': oldSize+'px',
                'margin-left': '-'+(oldSize/2)+'px',
                'margin-top': '-'+(oldSize/2)+'px'
            }, 500);
            $(this).children(".content").toggle();
        };
        ele.click(function() {
//insert code to toggle stuff
        });
    };
})(jQuery);

$(".home").createToggle(500);

and the css:

.circleBase {
    -webkit-border-radius: 999px;
    -moz-border-radius: 999px;
    border-radius: 999px;
    behavior: url(PIE.htc);
}

.home {
    width: 200px;
    height: 200px;
    background: #FF5032;
    position: absolute;
    top: 300px;
    left: 300px;
    margin-left: -100px;
    margin-top: -100px;
}

.title {
    position: relative;
    padding-top: 10%;
    text-align: center;
    font-weight: bold;
    font-size: 24px;
}

.content {
    text-align: center;
    display: none;
}

and the html:

<div class="circleBase home">
    <p class="title">Glen Takahashi<p>
    <p class="content">THIS IS CONTENT<BR> THIS IS CONTENT<BR> THIS IS CONTENT<BR> THIS IS CONTENT<BR> THIS IS CONTENT</p>
</div>

Answer 1

With two states, you can just maintain the current toggled state as a boolean (I used clickState). If you wanted to have multiple states, you could continue to add 1 to the state count and then check the modulus of the total count to determine which function should fire based on the state.

I updated your code a bit since ele is actually the jQuery object you want to work with:

http://jsfiddle.net/TNAC6/2/