Jquery Mobile 可摺疊的內容顯示(Collapsible Content)

可摺疊內容是因為行動裝置的螢幕尺寸有限，為了顯示更多內容，所以只顯示標題文字，點選標題文字才會向下展開來顯示內容；再按一下，就向上摺疊來隱藏內容。

主要使用的屬性為 data-role 參數為 collapsible

一、單層摺疊內容

範例： 點我下載

        <div data-role="content">

            <div data-role="collapsible">

               <h1> 我是摺疊內容</h1>

               <p>我被摺起來了</p>

            </div>                         

        </div>

效果點選後，即會展開。

點選展開！！

二、巢狀可摺疊內容：

即兩層以上的摺疊內容。

範例：點我下載

       <div data-role="content">

            <div data-role="collapsible">

               <h1> 我是摺疊內容(第一層)</h1>

               <p>我被摺起來了(第一層)</p>

                   <div data-role="collapsible">

                       <h2>我是摺疊內容(第二層)</h2>

                       <p>我被摺起來了(第二層)</p>

                   </div>

            </div>                         

        </div>

三、手風琴的內容 (Accordion Content)

效果：最多只會顯示其中一個詳細內容，其他隱藏起來。

<範例下載>

<div data-role="content">
            <div data-role="collapsible-set">
                <div data-role="collapsible">
                    <h1> 我是摺疊內容1</h1>
                    <p>我被摺起來了1</p>
                </div>
                <div data-role="collapsible">
                    <h2>我是摺疊內容(第二層)</h2>
                    <p>我被摺起來了(第二層)</p>
                </div>
            </div>
        </div>

點選上方+號，只顯示上方資料。




點選下方+號，只顯示下方資料。