Code breaks when updating jQuery due to changes in toggle

Question

Background

I have recently taken over development on a project from a programmer that was using multiple jquery versions from 1.3x to 1.6x... Now that I have implemented some advanced functionality, some of the functions are breaking... Most recently it is a instructions display box, which has an icon, and upon click it slides down the container explaining the instructions. Although I believe the best result would be to just rewrite the jquery for it, I bring this example to the experts of SO to explain WHY it has broken, when there are no deprecated functions used. Thank you for all your help in anticipation. (jQuery 1.9.1 being used).

Currently, what occurs is only 'The Instructional Center (and 'titlebox' border) is shown, while the "click to show instructions button" is hidden (slid up i think)... but what should actually occur is onClick of the actual 'img' button, it slides down the class of 'instrucContent'...But should be hidden on load, and on toggle of the 'img'.

HTML

<div class="titlebox">
    <h3>The Instructional Center</h3>
    <div class="instruc">
        <h3><img alt="Instructions" src="images/instrucicon.jpg"></h3>
    </div>
    <div class="instrucContent">
        <h3>Instructions</h3>
        <p>TEXT TEXT TEXT TEXT stackoverflow rocks TEXT TEXT TEXT</p>
    </div>
</div>

instructions.js

$(document).ready(function() {
    $('div.instruc').toggle(function() {
        $('div.instrucContent').slideUp('normal');  
        $(this).next().slideDown('normal');
    }
    ,function() { $('div.instrucContent').slideUp('normal');
    $("div.instrucContent").hide();
    });

$('div.ddinstruc').toggle(function() {
        $('div.instrucContent').slideUp('normal');  
        $(this).next().slideDown('normal');
    }
    ,function() { $('div.instrucContent').slideUp('normal');
    $("div.instrucContent").hide();

});

    $("div.instrucContent").hide(); //closes all divs on page load
});

Answer 1

The version of the toggle function taking functions as parameters has been removed from last versions, as it's easy to implement it yourself using click.

For example :

$(document).ready(function() {
    var count = 0;
    $('div.instruc').click(function() {
        if ((count++)%2) {
           $('div.instrucContent').slideUp('normal');  
           $(this).next().slideDown('normal');
        } else {
           $('div.instrucContent').slideUp('normal');
           $("div.instrucContent").hide();
        }
    });

---

You can also reintroduce a toggle function with the behavior of the removed function.

Here's a generic replacement :

$.fn.toggleFuncs = function() {
    var functions = Array.prototype.slice.call(arguments);
    var _this = this.click(function(){
        var i = _this.data('func_count') || 0;
        functions[i%functions.length].call(_this);
        _this.data('func_count', i+1);
    });
}

You use it as you would use toggle :

$(document).ready(function() {
    $('div.instruc').toggleFuncs(function() {
        $('div.instrucContent').slideUp('normal');  
        $(this).next().slideDown('normal');
    }
    ,function() { $('div.instrucContent').slideUp('normal');
    $("div.instrucContent").hide();
    });

$('div.ddinstruc').toggleFuncs(function() {
        $('div.instrucContent').slideUp('normal');  
        $(this).next().slideDown('normal');
    }
    ,function() { $('div.instrucContent').slideUp('normal');
    $("div.instrucContent").hide();

});

    $("div.instrucContent").hide(); //closes all divs on page load
});

Answer 2

The toggle you used is deprecated in jQuery 1.9 see jQuery 1.9 upgrade guide

$('div.instruc').toggle(function() {
        $('div.instrucContent').slideUp('normal');  
        $(this).next().slideDown('normal');
    }
    ,function() { $('div.instrucContent').slideUp('normal');
    $("div.instrucContent").hide();
    });

Or

$('div.ddinstruc').toggle(function() {
        $('div.instrucContent').slideUp('normal');  
        $(this).next().slideDown('normal');
    }
    ,function() { $('div.instrucContent').slideUp('normal');
    $("div.instrucContent").hide();

});