What is the best way of "overriding" the .toggle() function of jquery?

Question

I want to change the toggle function so that it changes the text of the link to say "show/hide" or "expand/collapse".

The function definition and call in classic JS would be:

function myToggle(expandText, collapseText, id,o){
   // expandText: "expand", "show", "display"
   // collapseText: "collapse", "hide"
   // id: the id of the div to toggle
   // o: the object from where the function has been called
}

I would then call it as such:

<a href="#" onclick="myToggle('Show','Hide', 'myId', this); return false;">Show the div</a>
<div id='myId'>Hi!</div>

It would do a replacement of the "Show" string by "Hide" and show() the div. Clicking again will reverse back to the previous state. Pretty simple stuff, that is not the problem.

---

I'm new to jquery but I already love it. I know there is a clean way of creating something like this but I'm not sure how to use it...

So the question is: How would you define and call such a function? What's the best and cleanest way of doing so (should I change jquery's toggle, create my own...) ?

Any pointers or reading up (no books please, I still need to get that done today :) ) will be appreciated. You do not need to actually write the function body to get accepted.

Answer 1

You could write your own plugin.

jQuery.fn.myToggle = function( show, hide, id) {
    return this.each( function() {
        var $href = $(this);
        $href.click( function(evt) {
            var text = $href.text();
            if (text.indexOf(show) > -1) {
                $href.html( text.replace(show,hide) );
            }
            else {
                $href.html( text.replace(hide,show) );      
            }
            $("#" + id).toggle();
            evt.preventDefault();


        });

    });
};



 $('#clicky').myToggle( 'show','hide','myId');