展开/折叠jQuery ui移动中的所有列表元素

Question

我正在尝试在网页上放置一个按钮，该页面使用jquery移动来构造可折叠列表，以展开/折叠所有列表。但是，我对jquery和javascript编码相当陌生，因此遇到了一些问题。我已经放置了按钮，但是它的代码在单击它时没有响应。我将如何纠正这段代码，使其成功地展开/折叠？

按钮的代码在这里：

<script type="text/javascript" src="js/jquery-1.11.2.min.js">

$('#collapsible1').click("click", showHide);

var collapsible = $('.collapsible');
collapsible.hide();

function showHide() {
    if(collapsible.is(':hidden'))
        collapsible.slideDown();
    else
        collapsible.slideUp();
}

</script>

该按钮按如下方式初始化：

<button id="collapsible1">Show/Hide</button>

我正在测试它的模板在这里：http://jsfiddle.net/TLittler/9ndzm3cc/5/

Answer 1

可折叠小部件有展开和折叠方法：

http://api.jquerymobile.com/collapsible/#method-expand

所以你可以像这样展开所有的塌陷物：

$('[data-role="collapsible"]').collapsible( "expand" );

然后像这样把它们折叠起来：

$('[data-role="collapsible"]').collapsible( "collapse" );

更新的小提琴