19

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>
Glen Takahashi
  • 861
  • 1
  • 10
  • 19
  • 5
    A few replacement methods can be found here: https://forum.jquery.com/topic/beginner-function-toggle-deprecated-what-to-use-instead however, if you post your code, we can more than likely help you with your direct situation. You more than likely never needed the .toggle method in the first place. – Kevin B Jan 23 '13 at 22:57
  • there is also a .toggle() method in the jQuery UI library http://api.jqueryui.com/toggle/ – samazi Jan 23 '13 at 23:53
  • okay i've added my code, if that makes it easier for you – Glen Takahashi Jan 24 '13 at 01:04

2 Answers2

6

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/

Explosion Pills
  • 188,624
  • 52
  • 326
  • 405
4
$(document).ready(function() {
    var flag=0;
    $('selector').on('click', function(){
        var menu = $("element_to_toggle");
        if(flag==0){
            menu.text("click one");
            flag=1;
            return;
        }
        else if(flag==1){
            menu.text("click two");
            flag=0;
            return;
        }
    });
});
Chance Smith
  • 1,211
  • 1
  • 15
  • 32
Raj Nandan Sharma
  • 3,694
  • 3
  • 32
  • 42