Can I copy the CollapsiblePanelExtender in jQuery as one method?

Posted by Matthew Jones on Stack Overflow See other posts from Stack Overflow or by Matthew Jones
Published on 2010-05-12T21:09:53Z Indexed on 2010/05/12 21:14 UTC
Read the original article Hit count: 502

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?

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about ASP.NET