Clever Geek Handbook

Switch script in jQuery 1.9.1

I just updated the site to 1.9.1 and below script no longer works:

Script

$(document).ready(function(){
    $("#button").toggle(function() {
        $(this).text('Hide content');
    }, function() {
        $(this).text('Show content');
    });
    $('#button').click(function(){
       $("#content_div").slideToggle("medium");
    });
});

Html

<a href="#" id="button">Show content</a>

I'm not very good with jQuery so I hope someone can help me with this script, I would appreciate if the answer provides an explanation of the solution (trying to learn jQuery).

Thank!

+3


source to share


2 answers


I think the following gives you the full functionality you are looking for. I don't think I need it, but again, I wrote this haha. So let me know if this makes sense and does what you need: :)



$(document).ready(function(){
        $('#button').click(function(){
            var txt = "Show Content";
            if ($("#button").html()==txt)
            {
                txt = "Hide content";
            }
            $("#button").html(txt);


            $("#content_div").slideToggle("medium");
        });
    });
0


source


This feature .toggle

was removed in jQuery 1.9

There are many ways to deal with this. One is to simply track the click state of the object inside.



$("#button").on('click', function () {
    if ($(this).data('clicked')) {
        //functionality state 2
    }
    else {
        //functionality state 1
    }
    $(this).data('clicked', function (_, data) { return !data; });
});

You can even manage more than two states using integers and modulo.

+2


source






More articles:


All Articles