摺疊選單

by SuHan Lin

HTML

<link rel="stylesheet" href="https://5276f2482a397d06d5f8e509dc45c73b1df02db8.googledrive.com/host/0BydYaWZdHurSRGh4TGJaekM1Y1U/jquery/foldmenu/jquery-ui.css">
<script src="https://5276f2482a397d06d5f8e509dc45c73b1df02db8.googledrive.com/host/0BydYaWZdHurSRGh4TGJaekM1Y1U/jquery/foldmenu/jquery.min.js"></script>
<script src="https://5276f2482a397d06d5f8e509dc45c73b1df02db8.googledrive.com/host/0BydYaWZdHurSRGh4TGJaekM1Y1U/jquery/foldmenu/jquery-ui.js"></script>
<script src="https://5276f2482a397d06d5f8e509dc45c73b1df02db8.googledrive.com/host/0BydYaWZdHurSRGh4TGJaekM1Y1U/jquery/foldmenu/jquery.ui.touch-punch.min.js"></script>
<div style="height:250px">
    <div id="accordion">
        <h3>頁籤 1</h3>
        <div>頁籤 1 內容</div>
				 
        <h3>頁籤 2</h3>       
        <div>頁籤 2 內容</div>
				 
        <h3>頁籤 3</h3>
        <div>頁籤 3 內容</div>
    </div>
</div>
<div style="margin-top:30px">
    <input type="radio" name="collapsible" id="disableCollapsible" value="disable" />讓選單無法摺疊
        <input type="radio" name="collapsible" id="enableCollapsible" value="enable" />讓選單可以摺疊
</div>

CSS

#accordion {
    font-size: 50%;
}

JavaScript

$(function () {
    $("#accordion").accordion({
        heightStyle: "fill",
	    collapsible: true
    });
    $("input").each(function () {
        $(this).change(function () {
            if ($(this).attr("id") == "disableCollapsible") {
                $("#accordion").accordion("option", "collapsible", false);
            } else {
                $("#accordion").accordion("option", "collapsible", true);
            }
        });
    });
});