para {
  text_node 'ExpressUI uses QuickAccord to display collapsible accordions.'
  a(href: 'http://www.jqueryscript.net/accordion/Accessible-Cross-browser-Accordion-Plugin-For-jQuery-QuickAccord.html', title: 'QuickAccord documentation') { 'See documentation' }
  text_node 'and usage guidelines.'
}

table {
  thead {
    th { "Code" }
    th { "Notes" }
  }
  tbody {
    tr {
      td {
        code { "$('.ae-accordion-trigger').QuickAccord();" }
      }
      td { "Required Javascript. This script initializes the accordion." }
    }
    tr {
      td {
        code { '<a href="#ae-accordion1" class="ae-accordion-trigger ae-btn ae-btn-primary expanded" data-accord-group="ae-accordion-group">Accordion 1</a>' }
      }
      td { "Required mark-up. The link that opens the accordion content." }
    }
    tr {
      td {
        code { '<div id="ae-accordion1" class="ae-accordion-content"></div>' }
      }
      td { "Required mark-up. The div that has the accordion content" }
    }
    tr {
      td {
        code { 'data-accord-group="ae-accordion-group"' }
      }
      td { "Optional mark-up. Added to the accordion trigger link. Responsible for grouping accordion items together, so that only 1 accordion expands at a time. " }
    }

  }
}

code_demo {
  %Q{
    ul {
      li {
        a(href:"#ae-accordion1", class:"ae-accordion-trigger ae-btn ae-btn-primary", 'data-accord-group' => "ae-accordion-group") { 'Accordion 1' }
        div(id: "ae-accordion1", class: "ae-accordion-content collapsed") {
          para { 'Content 1'}
        }
      }
      li {
        a(href:"#ae-accordion2", class:"ae-accordion-trigger ae-btn ae-btn-primary", 'data-accord-group' => "ae-accordion-group") { 'Accordion 2' }
        div(id: "ae-accordion2", class: "ae-accordion-content collapsed") {
          para { 'Content 2'}
        }
      }
      li {
        a(href:"#ae-accordion3", class:"ae-accordion-trigger ae-btn ae-btn-primary collapsed", 'data-accord-group'  => "ae-accordion-group") { 'Accordion 3' }
        div(id: "ae-accordion3", class: "ae-accordion-content collapsed") {
          para { 'Content 3'}
        }
      }
    }
  }
}