javascript - 折りたたみ可能なものに関数呼び出しを追加し、折りたたみ可能なテキストブロックに関数の戻り値を表示するにはどうすればよいですか

Question

この機能を追加したい

function list(){
    var html=" "
    for(var i =0; i<movements.length;i++){
    html+=("<p>" + movements[i][0]+ " " + movements[i][1] + " " + movements[i][2] + "</p>")}
    document.getElementById("listSpace").innerHTML = html;
}

折りたたみ可能なものをクリックすると、テキストブロックに戻ることが表示list()されます。

<div data-role="collapsible-set" id="myCollapsible">
              <div data-role="collapsible" data-collapsed="true" >
                  <h3>
                      10 Last movements
                  </h3>
                  <div data-controltype="textblock">
                      <p>
                          <b id="listSpace">
                              10 last movements
                          </b>
                      </p>
                  </div>
              </div>
     </div>

Answer 1

コードにいくつかの変更を加えました

function list() {
    var html = " ", movements = [['10', 'next', 'movements'],['10', 'next', 'movements'],['10', 'next', 'movements']];
    for (var i = 0; i < movements.length; i++) {
        html += ("<p>" + movements[i][0] + " " + movements[i][1] + " " + movements[i][2] + "</p>")
    }
    document.getElementById("listSpace").innerHTML = html;
}
$(document).ready(function () {
    $('div[data-role="collapsible"]').click(list);
});

フィドルをチェックしてください