Accordion

Accordion 的基本元件與 jQuery UI 相同,包含了外層的 .accordion , 標題 .accordion-header 以及內容 .accordion-content以下範例的 Javascript 是採用 jQuery UI

基本樣式

你可以搭配 jQuery UI 一起使用,但記得要額外下載 kule-jquery-ui.min.js。如果你是自己撰寫 Javascript,點選開啟內容,只要在 .accordion-header 加上 .active 即可,如果是使用 jQuery UI 則不需要 .active

Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt illo, recusandae minus alias dicta at dolorem, eligendi placeat accusantium non aliquam soluta itaque voluptates dolorum doloribus pariatur est! Facilis, delectus! Nihil ratione quos, est reprehenderit adipisci nobis! At sunt ipsa autem deserunt omnis officiis nulla mollitia qui asperiores tenetur. Expedita rerum non facere ipsa recusandae in magni dolore delectus quo consequuntur voluptatem quas maiores, necessitatibus nostrum! Illo odio excepturi quas beatae, consectetur a error! Pariatur facilis a earum provident qui blanditiis, laborum incidunt illum illo vitae totam eius non dolorum, hic. Reprehenderit alias sapiente, consequuntur quia enim nulla ex quos.

Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt illo, recusandae minus alias dicta at dolorem, eligendi placeat accusantium non aliquam soluta itaque voluptates dolorum doloribus pariatur est! Facilis, delectus! Nihil ratione quos, est reprehenderit adipisci nobis! At sunt ipsa autem deserunt omnis officiis nulla mollitia qui asperiores tenetur. Expedita rerum non facere ipsa recusandae in magni dolore delectus quo consequuntur voluptatem quas maiores, necessitatibus nostrum! Illo odio excepturi quas beatae, consectetur a error! Pariatur facilis a earum provident qui blanditiis, laborum incidunt illum illo vitae totam eius non dolorum, hic. Reprehenderit alias sapiente, consequuntur quia enim nulla ex quos.

Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt illo, recusandae minus alias dicta at dolorem, eligendi placeat accusantium non aliquam soluta itaque voluptates dolorum doloribus pariatur est! Facilis, delectus! Nihil ratione quos, est reprehenderit adipisci nobis! At sunt ipsa autem deserunt omnis officiis nulla mollitia qui asperiores tenetur. Expedita rerum non facere ipsa recusandae in magni dolore delectus quo consequuntur voluptatem quas maiores, necessitatibus nostrum! Illo odio excepturi quas beatae, consectetur a error! Pariatur facilis a earum provident qui blanditiis, laborum incidunt illum illo vitae totam eius non dolorum, hic. Reprehenderit alias sapiente, consequuntur quia enim nulla ex quos.
<div class="accordion">
    <h3 class="accordion-header active">
        <i class="caret"></i>
        Accordion
    </h3>
    <div class="accordion-content">~略~</div>
    <h3 class="accordion-header">
        <i class="caret"></i>
        Accordion
    </h3>
    <div class="accordion-content">~略~</div>
    <h3 class="accordion-header">
        <i class="caret"></i>
        Accordion
    </h3>
    <div class="accordion-content">~略~</div>
</div>

Accordion 狀態

與其他組件相同,只要在 .accordion-header 加上作用中的 .active 或是 禁用中的 .disabled 即可。

Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt illo, recusandae minus alias dicta at dolorem, eligendi placeat accusantium non aliquam soluta itaque voluptates dolorum doloribus pariatur est! Facilis, delectus! Nihil ratione quos, est reprehenderit adipisci nobis! At sunt ipsa autem deserunt omnis officiis nulla mollitia qui asperiores tenetur. Expedita rerum non facere ipsa recusandae in magni dolore delectus quo consequuntur voluptatem quas maiores, necessitatibus nostrum! Illo odio excepturi quas beatae, consectetur a error! Pariatur facilis a earum provident qui blanditiis, laborum incidunt illum illo vitae totam eius non dolorum, hic. Reprehenderit alias sapiente, consequuntur quia enim nulla ex quos.

Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt illo, recusandae minus alias dicta at dolorem, eligendi placeat accusantium non aliquam soluta itaque voluptates dolorum doloribus pariatur est! Facilis, delectus! Nihil ratione quos, est reprehenderit adipisci nobis! At sunt ipsa autem deserunt omnis officiis nulla mollitia qui asperiores tenetur. Expedita rerum non facere ipsa recusandae in magni dolore delectus quo consequuntur voluptatem quas maiores, necessitatibus nostrum! Illo odio excepturi quas beatae, consectetur a error! Pariatur facilis a earum provident qui blanditiis, laborum incidunt illum illo vitae totam eius non dolorum, hic. Reprehenderit alias sapiente, consequuntur quia enim nulla ex quos.

Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt illo, recusandae minus alias dicta at dolorem, eligendi placeat accusantium non aliquam soluta itaque voluptates dolorum doloribus pariatur est! Facilis, delectus! Nihil ratione quos, est reprehenderit adipisci nobis! At sunt ipsa autem deserunt omnis officiis nulla mollitia qui asperiores tenetur. Expedita rerum non facere ipsa recusandae in magni dolore delectus quo consequuntur voluptatem quas maiores, necessitatibus nostrum! Illo odio excepturi quas beatae, consectetur a error! Pariatur facilis a earum provident qui blanditiis, laborum incidunt illum illo vitae totam eius non dolorum, hic. Reprehenderit alias sapiente, consequuntur quia enim nulla ex quos.
<div class="accordion">
    <h3 class="accordion-header active">
        <i class="caret"></i>
        Accordion
    </h3>
    <div class="accordion-content">Lorem ipsum dolor sit amet...</div>
    <h3 class="accordion-header">
        <i class="caret"></i>
        Accordion
    </h3>
    <div class="accordion-content">Lorem ipsum dolor sit amet...</div>
    <h3 class="accordion-header disabled">
        <i class="caret"></i>
        Accordion
    </h3>
    <div class="accordion-content">Lorem ipsum dolor sit amet...</div>
</div>

Accordion 樣式

Bordered

只要在 .accordion 再加上 .accordion-bordered 即可

Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt illo, recusandae minus alias dicta at dolorem, eligendi placeat accusantium non aliquam soluta itaque voluptates dolorum doloribus pariatur est! Facilis, delectus! Nihil ratione quos, est reprehenderit adipisci nobis! At sunt ipsa autem deserunt omnis officiis nulla mollitia qui asperiores tenetur. Expedita rerum non facere ipsa recusandae in magni dolore delectus quo consequuntur voluptatem quas maiores, necessitatibus nostrum! Illo odio excepturi quas beatae, consectetur a error! Pariatur facilis a earum provident qui blanditiis, laborum incidunt illum illo vitae totam eius non dolorum, hic. Reprehenderit alias sapiente, consequuntur quia enim nulla ex quos.

Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt illo, recusandae minus alias dicta at dolorem, eligendi placeat accusantium non aliquam soluta itaque voluptates dolorum doloribus pariatur est! Facilis, delectus! Nihil ratione quos, est reprehenderit adipisci nobis! At sunt ipsa autem deserunt omnis officiis nulla mollitia qui asperiores tenetur. Expedita rerum non facere ipsa recusandae in magni dolore delectus quo consequuntur voluptatem quas maiores, necessitatibus nostrum! Illo odio excepturi quas beatae, consectetur a error! Pariatur facilis a earum provident qui blanditiis, laborum incidunt illum illo vitae totam eius non dolorum, hic. Reprehenderit alias sapiente, consequuntur quia enim nulla ex quos.

Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt illo, recusandae minus alias dicta at dolorem, eligendi placeat accusantium non aliquam soluta itaque voluptates dolorum doloribus pariatur est! Facilis, delectus! Nihil ratione quos, est reprehenderit adipisci nobis! At sunt ipsa autem deserunt omnis officiis nulla mollitia qui asperiores tenetur. Expedita rerum non facere ipsa recusandae in magni dolore delectus quo consequuntur voluptatem quas maiores, necessitatibus nostrum! Illo odio excepturi quas beatae, consectetur a error! Pariatur facilis a earum provident qui blanditiis, laborum incidunt illum illo vitae totam eius non dolorum, hic. Reprehenderit alias sapiente, consequuntur quia enim nulla ex quos.
<div class="accordion accordion-bordered">
    ~略~
</div>

Separated

只要在 .accordion 再加上 .accordion-separated 即可

Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt illo, recusandae minus alias dicta at dolorem, eligendi placeat accusantium non aliquam soluta itaque voluptates dolorum doloribus pariatur est! Facilis, delectus! Nihil ratione quos, est reprehenderit adipisci nobis! At sunt ipsa autem deserunt omnis officiis nulla mollitia qui asperiores tenetur. Expedita rerum non facere ipsa recusandae in magni dolore delectus quo consequuntur voluptatem quas maiores, necessitatibus nostrum! Illo odio excepturi quas beatae, consectetur a error! Pariatur facilis a earum provident qui blanditiis, laborum incidunt illum illo vitae totam eius non dolorum, hic. Reprehenderit alias sapiente, consequuntur quia enim nulla ex quos.

Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt illo, recusandae minus alias dicta at dolorem, eligendi placeat accusantium non aliquam soluta itaque voluptates dolorum doloribus pariatur est! Facilis, delectus! Nihil ratione quos, est reprehenderit adipisci nobis! At sunt ipsa autem deserunt omnis officiis nulla mollitia qui asperiores tenetur. Expedita rerum non facere ipsa recusandae in magni dolore delectus quo consequuntur voluptatem quas maiores, necessitatibus nostrum! Illo odio excepturi quas beatae, consectetur a error! Pariatur facilis a earum provident qui blanditiis, laborum incidunt illum illo vitae totam eius non dolorum, hic. Reprehenderit alias sapiente, consequuntur quia enim nulla ex quos.

Accordion

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sunt illo, recusandae minus alias dicta at dolorem, eligendi placeat accusantium non aliquam soluta itaque voluptates dolorum doloribus pariatur est! Facilis, delectus! Nihil ratione quos, est reprehenderit adipisci nobis! At sunt ipsa autem deserunt omnis officiis nulla mollitia qui asperiores tenetur. Expedita rerum non facere ipsa recusandae in magni dolore delectus quo consequuntur voluptatem quas maiores, necessitatibus nostrum! Illo odio excepturi quas beatae, consectetur a error! Pariatur facilis a earum provident qui blanditiis, laborum incidunt illum illo vitae totam eius non dolorum, hic. Reprehenderit alias sapiente, consequuntur quia enim nulla ex quos.
<div class="accordion accordion-separated">
    ~略~
</div>

Side

只要在 .accordion 再加上 .accordion-side 即可,同時內容選單可搭配 Navs 裡的 .nav-side

<div class="accordion accordion-side">
    ~略~
</div>