unknown reason for broken javascript button

Question

I have been slowly building a portfolio site for quite a while now, and I have made use of a few simple scripts. recently, some of these scripts have stopped working.

For reference, here is my site: http://www.jcstudios.org

The meta link on the bottom left hand side of the page is supposed to bring up a login form in place of the navigation menu and would then toggle back and forth as clicked. However, recently this javascript button has broken. I noticed it happened not long after installing the prettyphoto plugin to my site. If it is the case that this is messing up my scripts, I would like to find a fix as this plugin is one of the only plugins able to achieve what I am looking for. Any ideas why this script stopped working?

Here is the script, but I assure you that it worked fine for a while before spontaneously breaking.

$('.togglemeta').toggle(function(){
    $('.togglemeta').text('Site Nav')
    $('#meta').css('display', 'block');
    $('#sitenav').css('display', 'none');
},function(){
    $('.togglemeta').text('Meta')
    $('#meta').css('display', 'none');
    $('#sitenav').css('display', 'block');
})

Currently, this button is broken and I cannot figure out why.

Answer 1

You probably upgraded jQuery, and in version 1.9.1, which is what you are using now, the toggle() function used that way is deprecated and removed, and now it only hides and shows elements.

You'll have to create your own toggle functionality instead :

$('.togglemeta').on('click', function(){
    var state = $(this).data('state');

    if (state) {
        $('.togglemeta').text('Meta')
        $('#meta').css('display', 'none');
        $('#sitenav').css('display', 'block');
    }else{
        $('.togglemeta').text('Site Nav')
        $('#meta').css('display', 'block');
        $('#sitenav').css('display', 'none');
    }

    $(this).data('state', !state);
});