extends ../../_layout/default.pug

block canonical
  link(rel='canonical' href='https://coreui.io/docs/components/collapse/')

block breadcrumb
  +breadcrumb(
    [
      { href: '#', label: 'Home'},
      { label: 'Components'},
      { label: 'Base'},
      'Collapse'
    ]
  )

block view
  +docs-components('https://coreui.io/docs/components/collapse/')
  .card.mb-4
    .card-header
      strong Collapse
    .card-body
      p.text-body-secondary.small
        | You can use a link with the 
        code href
        |  attribute, or a button with the 
        code data-coreui-target
        |  attribute. In both samples, the 
        code data-coreui-toggle="collapse""
        |  is required.
      +example('https://coreui.io/docs/components/collapse/#example')
        p
          a.btn.btn-primary(data-coreui-toggle='collapse', href='#collapseExample', aria-expanded='false', aria-controls='collapseExample')
            | Link with href
          button.btn.btn-primary(type='button', data-coreui-toggle='collapse', data-coreui-target='#collapseExample', aria-expanded='false', aria-controls='collapseExample')
            | Button with data-target
        #collapseExample.collapse
          .card.mb-4.card-body
            | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
  .card.mb-4
    .card-header
      strong Collapse
      span.small.ms-1 Horizontal
    .card-body
      p.text-body-secondary.small
        | The collapse plugin also supports horizontal collapsing. Add the 
        code .collapse-horizontal
        |  modifier class to transition the 
        code width
        |  instead of 
        code height
        |  and set a 
        code width
        |  on the immediate child element. Feel free to write your own custom Sass, use inline styles, or use our 
        a(href='/docs/utilities/sizing/') width utilities
        | .
      +example('https://coreui.io/docs/components/collapse/#horizontal')
        p
          button.btn.btn-primary(type='button' data-coreui-toggle='collapse' data-coreui-target='#collapseWidthExample' aria-expanded='false' aria-controls='collapseWidthExample')
            | Toggle width collapse
        div(style='min-height: 120px;')
          #collapseWidthExample.collapse.collapse-horizontal
            .card.card-body(style='width: 300px;')
              | This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
  .card.mb-4
    .card-header
      strong Collapse
      span.small.ms-1 multiple targets
    .card-body
      p.text-body-secondary.small
        | A 
        code
          = '<button>'
        |  or 
        code
          = '<a>'
        |  can show and hide multiple elements by referencing them with a selector in its 
        code href
        |  or 
        code data-coreui-target
        |  attribute. Multiple 
        code
          = '<button>'
        |  or 
        code
          = '<a>'
        |  can show and hide an element if they each reference it with their 
        code href
        |  or 
        code data-coreui-target
        |  attribute
      +example('https://coreui.io/docs/components/collapse/#multiple-targets')
        p
          a.btn.btn-primary(data-coreui-toggle='collapse', href='#multiCollapseExample1', aria-expanded='false', aria-controls='multiCollapseExample1') Toggle first element
          button.btn.btn-primary(type='button', data-coreui-toggle='collapse', data-coreui-target='#multiCollapseExample2', aria-expanded='false', aria-controls='multiCollapseExample1') Toggle second element
          button.btn.btn-primary(type='button', data-coreui-toggle='collapse', data-coreui-target='.multi-collapse', aria-expanded='false', aria-controls='multiCollapseExample1 multiCollapseExample2') Toggle both elements
        .row
          .col-sm-12.col-md-6
            #multiCollapseExample1.collapse.multi-collapse
              .card.mb-4.card-body
                | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.
          .col-sm-12.col-md-6
            #multiCollapseExample2.collapse.multi-collapse
              .card.mb-4.card-body
                | Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident.