如何为Bootstrap崩溃创建动态打开/关闭切换器？

Question

我需要一种方法，使用Bootstrap崩溃为手风琴东西制作带开/关文本的切换链接。之前关于这个主题的答案对我来说并不起作用，因为我需要在同一页面内允许无限数量的切换者以及无限数量的打开/关闭文本变体，例如：根据上下文显示/隐藏，打开/关闭，查看/关闭，图标或文本等。

所以这是我的方法：

HTML ：

<a href="#panel-1" data-toggle="collapse" data-state="close" data-text-open="View Profile" data-text-close="Hide Profile">Hidden text</a>
<a href="#panel-2" data-toggle="collapse" data-state="open" data-text-open="Open Review" data-text-close="Close Review">Hidden text</a>

的JavaScript ：

// set initial content
$('[data-toggle="collapse"]').each(function () {
    if ($(this).attr('data-state') == "open") {
        $(this).html($(this).attr('data-text-close'));
    } else {
        $(this).html($(this).attr('data-text-open'));
    }
});

// toggle content on click
$('[data-toggle="collapse"]').click(function () {
    // toggle state
    $(this).attr('data-state', $(this).attr('data-state') == 'open' ? 'close' : 'open');
    // toggle content based on state
    if ($(this).attr('data-state') == 'open') {
        $(this).html($(this).attr('data-text-close'));
    } else {
        $(this).html($(this).attr('data-text-open'));
    }
});

现在问题是：

1. 这是解决问题的“正确”方法吗？
2. 这段代码可以包装成一个函数吗？

jsFiddle