政府網站設計原則

<div class="accordion" data-behavior="single">
  <div class="accordion-item">
    <input type="checkbox" id="section1_single">
    <label for="section1_single">Accordion Item #1</label>
    <div class="accordion-body">
      <strong>這是第一個 accordion body.</strong> 預設為關閉狀態，這些class控制整體外觀，以及透過 CSS 轉換顯示和隱藏。您可以使用自訂 CSS 修改其中任何內容或覆寫我們的預設變數，基本上大部分 HTML 都可以放入 <font color="darkpink">.accordion-body</font>中。
    </div>
  </div>
  <div class="accordion-item">
    <input type="checkbox" id="section2_single">
    <label for="section2_single">Accordion Item #2</label>
    <div class="accordion-body">
      <strong>這是第二個 accordion body.</strong>我們嘗試使用list為範例呈現。當然您可以使用其他任何 HTML 元素，包括表格、圖片、影片等。
      <ul>
        <li>第一個清單</li>
        <li>第二個清單</li>
      </ul>
    </div>
  </div>
  <div class="accordion-item">
    <input type="checkbox" id="section3_single">
    <label for="section3_single">Accordion Item #3</label>
    <div class="accordion-body">
      <strong>這是第三個 accordion body.</strong>我們嘗試以一段長文字進行呈現。<br/>
      網頁設計（英語：Web design）涵蓋了製作和維護網站的許多不同的技能和學科。它包含了網頁圖形設計、介面設計、編寫標準化的代碼和專有軟體、使用者經驗設計，以及搜尋引擎最佳化。通常許多人以團隊協作的方式來工作，各自參與設計過程的各個方面；但有些設計師會參與到任何方面。網頁設計這個術語通常用來描述與網站前端（客戶端）設計相關的設計過程，包括編寫標記式語言。在更廣泛的Web開發領域，網頁設計與網路工程存在交集。網頁設計師應該對網路可用性有一定的認識。如果他們的工作涉及到編寫標記式語言，那麼他們也應該遵循網頁親和力的最新指引。
    </div>
  </div>
</div>

<button class="btn-toggle button button-primary mb2">Toggle All</button>
<div class="accordion" data-behavior="multiple">
  <div class="accordion-item">
    <input type="checkbox" id="section1_multiple">
    <label for="section1_multiple">Accordion Item #1</label>
    <div class="accordion-body">
      <strong>這是第一個 accordion body.</strong> 預設為關閉狀態，這些class控制整體外觀，以及透過 CSS 轉換顯示和隱藏。您可以使用自訂 CSS
      修改其中任何內容或覆寫我們的預設變數，基本上大部分 HTML 都可以放入 <font color="darkpink">.accordion-body</font>中。
    </div>
  </div>
  <div class="accordion-item">
    <input type="checkbox" id="section2_multiple">
    <label for="section2_multiple">Accordion Item #2</label>
    <div class="accordion-body">
      <strong>這是第二個 accordion body.</strong>我們嘗試使用list為範例呈現。當然您可以使用其他任何 HTML 元素，包括表格、圖片、影片等。
      <ul>
        <li>第一個清單</li>
        <li>第二個清單</li>
      </ul>
    </div>
  </div>
  <div class="accordion-item">
    <input type="checkbox" id="section3_multiple">
    <label for="section3_multiple">Accordion Item #3</label>
    <div class="accordion-body">
      <strong>這是第三個 accordion body.</strong>我們嘗試以一段長文字進行呈現。<br />
      網頁設計（英語：Web
      design）涵蓋了製作和維護網站的許多不同的技能和學科。它包含了網頁圖形設計、介面設計、編寫標準化的代碼和專有軟體、使用者經驗設計，以及搜尋引擎最佳化。通常許多人以團隊協作的方式來工作，各自參與設計過程的各個方面；但有些設計師會參與到任何方面。網頁設計這個術語通常用來描述與網站前端（客戶端）設計相關的設計過程，包括編寫標記式語言。在更廣泛的Web開發領域，網頁設計與網路工程存在交集。網頁設計師應該對網路可用性有一定的認識。如果他們的工作涉及到編寫標記式語言，那麼他們也應該遵循網頁親和力的最新指引。
    </div>
  </div>
</div>

<div class="accordion">
  <div class="accordion-item">
    <input type="checkbox" id="section1">
    <label for="section1">
      <span class="main-title">Accordion Item #1</span>
      <span class="sub-title">Accordion Item #1 副標題</span>
    </label>
    <div class="accordion-body">
      <strong>這是第一個 accordion body.</strong> 預設為關閉狀態，這些class控制整體外觀，以及透過 CSS 轉換顯示和隱藏。您可以使用自訂 CSS 修改其中任何內容或覆寫我們的預設變數，基本上大部分 HTML 都可以放入 <font color="darkpink">.accordion-body</font> 中。
    </div>
  </div>
  <div class="accordion-item">
    <input type="checkbox" id="section2">
    <label for="section2">
      <span class="main-title">Accordion Item #2</span>
      <span class="sub-title">Accordion Item #2 副標題</span>
    </label>
    <div class="accordion-body">
      <strong>這是第二個 accordion body.</strong>我們嘗試使用list為範例呈現。當然您可以使用其他任何 HTML 元素，包括表格、圖片、影片等。
      <ul>
        <li>第一個清單</li>
        <li>第二個清單</li>
      </ul>
    </div>
  </div>
  <div class="accordion-item">
    <input type="checkbox" id="section3">
    <label for="section3">
      <span class="main-title">Accordion Item #3</span>
      <span class="sub-title">Accordion Item #3 副標題</span>
    </label>
    <div class="accordion-body">
      <strong>這是第三個 accordion body.</strong>我們嘗試以一段長文字進行呈現。<br/>
      網頁設計（英語：Web design）涵蓋了製作和維護網站的許多不同的技能和學科。它包含了網頁圖形設計、介面設計、編寫標準化的代碼和專有軟體、使用者經驗設計，以及搜尋引擎最佳化。通常許多人以團隊協作的方式來工作，各自參與設計過程的各個方面；但有些設計師會參與到任何方面。網頁設計這個術語通常用來描述與網站前端（客戶端）設計相關的設計過程，包括編寫標記式語言。在更廣泛的Web開發領域，網頁設計與網路工程存在交集。網頁設計師應該對網路可用性有一定的認識。如果他們的工作涉及到編寫標記式語言，那麼他們也應該遵循網頁親和力的最新指引。
    </div>
  </div>
</div>