Can I copy the CollapsiblePanelExtender in jQuery as one method?

Question

I am beginning the process of moving away from the AjaxControlToolkit and toward jQuery. What I want to do is have one function that duplicates the functionality of the CollapsiblePanelExtender. For a particular set of hyperlink and div, the code looks like this:

$('#nameHyperLink').click(function() {

        var div = $('#nameDiv');
        var link = $('#nameHyperLink');
        if (div.css('display') == 'none') {
            link.text('Hide Data');
            div.show(400);
        }
        else {
            link.text('Show Data');
            div.hide(400);
        }

    });

What I really want to do is only have to write this function once, then use it for many (approx 40) instances throughout my website. Ideally what I want is this:

function showHidePanel(divID,linkID,showText,hideText){
        var div = $(divID);
        var link = $(linkID);
        if (div.css('display') == 'none') {
            link.text('Hide Data');
            div.show(400);
        }
        else {
            link.text('Show Data');
            div.hide(400);
        }

    });

I would then call this function from every HyperLink involved using OnClientClick.

Is there a way to do this?

Answer 1

Have you looked at the jquery accordian plugin?