jquery - モバイルアプリのjquery uiアコーディオン

Question

モバイル アプリに jquery ui アコーディオンがあり、その中にほぼ 4 ～ 5 個のコンテンツ パネルがあります。アコーディオンの最後のパネルには、送信ボタンと 2 つのテキスト フィールドを持つ div があります。テキストボックスをクリックすると、キーボードがポップアップします。キーボードを使用してテキスト フィールドに値を入力した後、パネル内の送信ボタンをクリックすると、現在アクティブなアコーディオン パネルが閉じられ、望ましくない別のアコーディオン コンテンツ パネルがアクティブになります。パネル内のボタンをクリックしているときにアクティブなパネルを閉じる方法を見つけるのを手伝ってくれる人はいますか?

<table>
    <tr>
        <td>col1</td><td>col2</td><td>col3</td>
    </tr>
    <!-- row containing accordion which is loaded 
         dynamically on click of the above row-->
    <tr>
        <td colspan=3>
            <div id='accordion'>
                <div><h3>Heading1</h3></div>
                <div> Content1</div>
                <div><h3>Heading2</h3></div>
                <div> Content2</div>
                <div><h3>Heading3</h3></div>
                <div> Content3</div>
                <div><h3>Heading4</h3></div>
                <div> Content4</div>
                <div><h3>Heading5</h3></div>
                <div><!-- the div with submit button comes here -->
                    <div><input type="text" name="txt1"></div>
                    <div><input type="text" name="txt2"></div>
                    <div><input type="button" value="Submit"></div>
                </div>
            </div>
        </td>
    </tr>
</table>

<script>
    $( "#accordion" ).accordion({
        collapsible: true,     
        heightStyle: "content"    
    });
</script>