- var page_Title = 'Accordion';
- var accordion             = true;
- var theme_customizer      = true;
- var sidebar               = true;
- var slick                 = true;
- var header_slider         = true;
- var animate               = true;
- var scrollbar             = true;
- var height_equal          = true;
- var prism                 = true;
- var clipboard             = true;
- var customcard            = true;
doctype html
html(lang='en')
  include ../../components/header-files
  body
    include ../../components/loader
    include ../../components/taptop
    // page-wrapper Start
    #pageWrapper.page-wrapper.compact-wrapper
      include ../../components/header
      // Page Body Start
      .page-body-wrapper
        include ../../components/sidebar
        .page-body
          .container.w-full
            .page-title
              .grid.grid-cols-12.mx-2.items-center
                div(class="col-span-6 sm:col-span-12")
                  h3
                    | Accordions
                div(class="col-span-6 sm:col-span-12")
                  ol.breadcrumb.flex
                    li.breadcrumb-item
                      a(href='index.html')                                        
                        svg.stroke-icon
                          use(href='../assets/svg/icon-sprite.svg#stroke-home')
                    li.breadcrumb-item Ui Kits
                    li.breadcrumb-item.active Accordions
          // Container-fluid starts
          .container.main-accordion
            .grid.grid-cols-12.card-gap
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Simple Accordion
                    p.f-m-light.mt-1
                      | Drop the 
                      code collapsed 
                      |  class from the 
                      code  accordion-button 
                      | element and set its aria-expanded attribute to true.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body
                    #simpleaccordion.accordion-1.accordion.dark-accordion
                      .accordion-item
                        h2#headingOne.accordion-header
                          button.accordion-button.collapsed.accordion-light-primary.txt-primary.active(type='button' data-bs-toggle='collapse' data-bs-target='#collapseOne' aria-expanded='true' aria-controls='collapseOne')
                            | Accordion Item #1
                            i.svg-color(data-feather='chevron-down')
                        #collapseOne.accordion-collapse.collapse.show
                          .accordion-body
                            | This is the 
                            b first item's 
                            | accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the 
                            b .accordion-body 
                            | , though the transition does limit overflow.
                      .accordion-item
                        h2#headingTwo.accordion-header
                          button.accordion-button.collapsed.accordion-light-primary.txt-primary.active(type='button' data-bs-toggle='collapse' data-bs-target='#collapseTwo' aria-expanded='false' aria-controls='collapseTwo')
                            | Accordion Item #2
                            i.svg-color(data-feather='chevron-down')
                        #collapseTwo.accordion-collapse.collapse
                          .accordion-body
                            | This is the 
                            b second item's 
                            | accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the 
                            b .accordion-body 
                            | , though the transition does limit overflow.
                      .accordion-item
                        h2#headingThree.accordion-header
                          button.accordion-button.collapsed.accordion-light-primary.txt-primary.active(type='button' data-bs-toggle='collapse' data-bs-target='#collapseThree' aria-expanded='false' aria-controls='collapseThree')
                            | Accordion Item #3
                            i.svg-color(data-feather='chevron-down')
                        #collapseThree.accordion-collapse.collapse
                          .accordion-body
                            p 
                              | This is the 
                              b third item's 
                              | accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the 
                              b .accordion-body 
                              | , though the transition does limit overflow.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#according', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#according
                          |&lt;div class="accordion dark-accordion" id="simpleaccordion"&gt;
                          |  &lt;div class="accordion-item"&gt;
                          |    &lt;h2 class="accordion-header" id="headingOne"&gt;
                          |      &lt;button class="accordion-button collapsed accordion-light-primary txt-primary active" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne"&gt;Accordion Item #1&lt;i class="svg-color" data-feather="chevron-down"&gt;&lt;/i&gt;&lt;/button&gt;
                          |    &lt;/h2&gt;
                          |    &lt;div class="accordion-collapse collapse show" id="collapseOne"&gt;
                          |      &lt;div class="accordion-body"&gt;This is the
                          |        &lt;b&gt;first item's&lt;/b&gt;accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
                          |        &lt;b&gt;.accordion-body&lt;/b&gt;, though the transition does limit overflow.
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="accordion-item"&gt;
                          |    &lt;h2 class="accordion-header" id="headingTwo"&gt;
                          |      &lt;button class="accordion-button collapsed accordion-light-primary txt-primary active" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo"&gt;Accordion Item #2
                          |        &lt;i class="svg-color" data-feather="chevron-down"&gt;&lt;/i&gt;
                          |      &lt;/button&gt;
                          |    &lt;/h2&gt;
                          |    &lt;div class="accordion-collapse collapse" id="collapseTwo"&gt;
                          |      &lt;div class="accordion-body"&gt;This is the
                          |        &lt;b&gt;second item's&lt;/b&gt;accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
                          |        &lt;b&gt;.accordion-body&lt;/b&gt;, though the transition does limit overflow.
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="accordion-item"&gt;
                          |    &lt;h2 class="accordion-header" id="headingThree"&gt;
                          |      &lt;button class="accordion-button collapsed accordion-light-primary txt-primary active" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree"&gt;Accordion Item #3
                          |        &lt;i class="svg-color" data-feather="chevron-down"&gt;&lt;/i&gt;
                          |      &lt;/button&gt;
                          |    &lt;/h2&gt;
                          |    &lt;div class="accordion-collapse collapse" id="collapseThree"&gt;
                          |      &lt;div class="accordion-body"&gt;
                          |        &lt;p&gt;This is the
                          |          &lt;b&gt;third item's&lt;/b&gt;accordion body. It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the
                          |          &lt;b&gt;.accordion-body&lt;/b&gt;,though the transition does limit overflow.
                          |        &lt;/p&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Flush Accordion
                    p.f-m-light.mt-1
                      | Add 
                      code accordion-flush
                      |  to remove the default
                      code  background-color
                      |  , some borders, and some rounded corners to render accordions edge-to-edge with their parent container.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body 
                    #accordionFlushExample.accordion.accordion-flush.dark-accordion
                      .accordion-item
                        h2#flush-headingOne.accordion-header
                          button.accordion-button.collapsed.txt-secondary.accordion-light-secondary.active(type='button' data-bs-toggle='collapse' data-bs-target='#flush-collapseOne' aria-expanded='false' aria-controls='flush-collapseOne')
                            | Accordion Item #1
                            i.svg-color(data-feather='chevron-down')
                        #flush-collapseOne.accordion-collapse.collapse.show
                          .accordion-body
                            p 
                              | Placeholder content for this accordion, which is intended to demonstrate the 
                              b .accordion-flush
                              | class. This is the first item's accordion body.
                      .accordion-item
                        h2#flush-headingTwo.accordion-header
                          button.accordion-button.collapsed.txt-secondary.accordion-light-secondary(type='button' data-bs-toggle='collapse' data-bs-target='#flush-collapseTwo' aria-expanded='false' aria-controls='flush-collapseTwo')
                            | Accordion Item #2
                            i.svg-color(data-feather='chevron-down')
                        #flush-collapseTwo.accordion-collapse.collapse
                          .accordion-body
                            p 
                              | Placeholder content for this accordion, which is intended to demonstrate the 
                              b .accordion-flush
                              | class. This is the second item's accordion body. Let's imagine this being filled with some actual content.
                      .accordion-item
                        h2#flush-headingThree.accordion-header
                          button.accordion-button.collapsed.txt-secondary.accordion-light-secondary(type='button' data-bs-toggle='collapse' data-bs-target='#flush-collapseThree' aria-expanded='false' aria-controls='flush-collapseThree')
                            | Accordion Item #3
                            i.svg-color(data-feather='chevron-down')
                        #flush-collapseThree.accordion-collapse.collapse
                          .accordion-body
                            p 
                              | Placeholder content for this accordion, which is intended to demonstrate the 
                              b .accordion-flush
                              | class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#flush-according', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#flush-according
                          |&lt;div class="accordion accordion-flush dark-accordion" id="accordionFlushExample"&gt;
                          |  &lt;div class="accordion-item"&gt;
                          |    &lt;h2 class="accordion-header" id="flush-headingOne"&gt;
                          |      &lt;button class="accordion-button collapsed txt-secondary accordion-light-secondary active" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne"&gt;Accordion Item #1
                          |         &lt;i class="svg-color" data-feather="chevron-down"&gt;&lt;/i&gt;
                          |      &lt;/button&gt;
                          |    &lt;/h2&gt;
                          |    &lt;div class="accordion-collapse collapse show" id="flush-collapseOne"&gt;
                          |      &lt;div class="accordion-body"&gt;
                          |        &lt;p&gt;Placeholder content for this accordion, which is intended to demonstrate the
                          |          &lt;b&gt;.accordion-flush&lt;/b&gt;class. This is the first item's accordion body.
                          |        &lt;/p&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="accordion-item"&gt;
                          |    &lt;h2 class="accordion-header" id="flush-headingTwo"&gt;
                          |      &lt;button class="accordion-button collapsed txt-secondary accordion-light-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo"&gt;Accordion Item #2
                          |         &lt;i class="svg-color" data-feather="chevron-down"&gt;&lt;/i&gt;
                          |      &lt;/button&gt;
                          |    &lt;/h2&gt;
                          |    &lt;div class="accordion-collapse collapse" id="flush-collapseTwo"&gt;
                          |      &lt;div class="accordion-body"&gt;
                          |        &lt;p&gt;Placeholder content for this accordion, which is intended to demonstrate the
                          |          &lt;b&gt;.accordion-flush&lt;/b&gt;class. This is the second item's accordion body. Let's imagine this being filled with some actual content.
                          |        &lt;/p&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="accordion-item"&gt;
                          |    &lt;h2 class="accordion-header" id="flush-headingThree"&gt;
                          |      &lt;button class="accordion-button collapsed txt-secondary accordion-light-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree"&gt;Accordion Item #3
                          |         &lt;i class="svg-color" data-feather="chevron-down"&gt;&lt;/i&gt;
                          |      &lt;/button&gt;
                          |    &lt;/h2&gt;
                          |    &lt;div class="accordion-collapse collapse" id="flush-collapseThree"&gt;
                          |      &lt;div class="accordion-body"&gt;
                          |        &lt;p&gt;Placeholder content for this accordion, which is intended to demonstrate the
                          |          &lt;b&gt;.accordion-flush&lt;/b&gt;class. This is the third item's accordion body. Nothing more exciting happening here in terms of content, but just filling up the space to make it look, at least at first glance, a bit more representative of how this would look in a real-world application.
                          |        &lt;/p&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-12")
                .card.multiple-collapse
                  .card-header
                    h5 Multiple Collapse Accordion
                    p.f-m-light.mt-1
                      | A 
                      code  &lt;button&gt;
                      |   or
                      code   &lt;a&gt;
                      |  can show and hide multiple elements by referencing them with a selector in its href or data-bs-target attribute. 
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body 
                    .common-flex
                      a.btn.btn-primary.text-white(data-bs-toggle='collapse' href='#multiCollapseExample1' role='button' aria-expanded='false' aria-controls='multiCollapseExample1') Toggle First Element
                      button.btn.btn-secondary(type='button' data-bs-toggle='collapse' data-bs-target='#multiCollapseExample2' aria-expanded='false' aria-controls='multiCollapseExample2' class="!text-white") Toggle Second Element
                      button.btn.btn-primary(type='button' data-bs-toggle='collapse' data-bs-target='.multi-collapse' aria-expanded='false' aria-controls='multiCollapseExample1 multiCollapseExample2' class="!text-white") Toggle Both Elements
                    .grid.grid-cols-12.card-gap
                      div(class="col-span-6 xl:col-span-12")
                        #multiCollapseExample1.collapse.multi-collapse.dark-accordion
                          .card.card-body.mt-3.mb-0.collapse-wrapper.accordion-light-primary
                            | The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from it's current value to 0. Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.
                      div(class="col-span-6 xl:col-span-12")
                        #multiCollapseExample2.collapse.multi-collapse.dark-accordion
                          .card.card-body.mt-3.mb-0.collapse-wrapper.accordion-light-secondary
                            | This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#multiple-according', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#multiple-according
                          |&lt;div class="common-flex"&gt;
                          |  &lt;a class="btn btn-primary" data-bs-toggle="collapse" href="#multiCollapseExample1" role="button" aria-expanded="false" aria-controls="multiCollapseExample1"&gt;Toggle First Element&lt;/a&gt;
                          |  &lt;button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#multiCollapseExample2" aria-expanded="false" aria-controls="multiCollapseExample2"&gt;Toggle Second Element&lt;/button&gt;
                          |  &lt;button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1 multiCollapseExample2"&gt;Toggle Both Elements&lt;/button&gt;
                          |&lt;/div&gt;
                          |&lt;div class="grid"&gt;
                          |  &lt;div class="col-span-6 xl:col-span-12"&gt;
                          |    &lt;div class="collapse multi-collapse dark-accordion" id="multiCollapseExample1"&gt;
                          |      &lt;div class="card card-body mt-3 mb-0 collapse-wrapper accordion-light-primary"&gt;The collapse JavaScript plugin is used to show and hide content. Buttons or anchors are used as triggers that are mapped to specific elements you toggle. Collapsing an element will animate the height from it's current value to 0. Given how CSS handles animations, you cannot use padding on a .collapse element. Instead, use the class as an independent wrapping element.&lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="col-span-6 xl:col-span-12"&gt;
                          |    &lt;div class="collapse multi-collapse dark-accordion" id="multiCollapseExample2"&gt;
                          |      &lt;div class="card card-body mt-3 mb-0 collapse-wrapper accordion-light-secondary"&gt;This is the first item's accordion body. It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables.&lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 With Icons Accordion
                    p.f-m-light.mt-1
                      | Use 
                      code accordion 
                      | & 
                      code feather icons
                      |  through change look icons accordion.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body.accordion-border.icons-accordion
                    #accordionPanelsStayOpenExample.accordion.dark-accordion
                      .accordion-item
                        h2#panelsStayOpen-headingOne.accordion-header
                          button.accordion-button.flex.items-center.collapsed.gap-2.accordion-light-secondary.active.txt-secondary(type='button' data-bs-toggle='collapse' data-bs-target='#panelsStayOpen-collapseOne' aria-expanded='false' aria-controls='panelsStayOpen-collapseOne')
                            i.svg-wrapper(data-feather='bell')
                            | Keep in touch
                            i.svg-color(data-feather='chevron-down')
                        #panelsStayOpen-collapseOne.accordion-collapse.collapse(aria-labelledby='panelsStayOpen-headingOne')
                          .accordion-body
                            p 
                              b  " This page might not behave as expected because Windows Internet Explorer isn't configured to load unsigned ActiveX controls."
                              |  or "Allow this page to install an unsigned ActiveX Control? Doing so from untrusted sources may harm your computer." (Both phrased as conditions that may cause future problems.)
                      .accordion-item
                        h2#panelsStayOpen-headingTwo.accordion-header
                          button.accordion-button.flex.items-center.collapsed.gap-2.accordion-light-secondary.active.txt-secondary(type='button' data-bs-toggle='collapse' data-bs-target='#panelsStayOpen-collapseTwo' aria-expanded='false' aria-controls='panelsStayOpen-collapseTwo')
                            i.svg-wrapper(data-feather='message-circle')
                            | Chats with others
                            i.svg-color(data-feather='chevron-down')
                        #panelsStayOpen-collapseTwo.accordion-collapse.collapse(aria-labelledby='panelsStayOpen-headingTwo')
                          .accordion-body
                            ul.flex.flex-col.gap-2.accordions-content
                              li You get the same features in Chat and Chat in Gmail, but the integrated Gmail experience provides a central location to communicate with friends, family, or coworkers between emails.
                              li 
                                strong Chat:
                                |  Use when you prefer a dedicated chat experience and don't mind switching between different apps.
                      .accordion-item
                        h2#panelsStayOpen-headingThree.accordion-header
                          button.accordion-button.flex.items-center.collapsed.gap-2.accordion-light-secondary.active.txt-secondary(type='button' data-bs-toggle='collapse' data-bs-target='#panelsStayOpen-collapseThree' aria-expanded='false' aria-controls='panelsStayOpen-collapseThree')
                            i.svg-wrapper(data-feather='check-square')
                            | Right way to code 
                            i.svg-color(data-feather='chevron-down')
                        #panelsStayOpen-collapseThree.accordion-collapse.collapse(aria-labelledby='panelsStayOpen-headingThree')
                          .accordion-body
                            ul.flex.flex-col.gap-2.accordions-content 
                              li 1) Decide on the indentation and keep it that way.
                              li 2) Make comments.
                              li 3) Consistent name scheme.
                              li 4) Don't repeat code.
                              li 5) Avoid writing long code lines.
                              li 6) Break down a big task into smaller chunks.
                              li 7) Organize your program into smaller files.
                              li 8) Write clever code that is also readable.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#icons-according', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#icons-according
                          |&lt;div class="accordion dark-accordion" id="accordionPanelsStayOpenExample"&gt;
                          |  &lt;div class="accordion-item"&gt;
                          |    &lt;h2 class="accordion-header" id="panelsStayOpen-headingOne"&gt;
                          |      &lt;button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseOne" aria-expanded="false" aria-controls="panelsStayOpen-collapseOne"&gt;
                          |        &lt;i class="svg-wrapper" data-feather="bell"&gt;&lt;/i&gt;Keep in touch
                          |        &lt;i class="svg-color" data-feather="chevron-down"&gt;&lt;/i&gt;
                          |      &lt;/button&gt;
                          |    &lt;/h2&gt;
                          |    &lt;div class="accordion-collapse collapse" id="panelsStayOpen-collapseOne" aria-labelledby="panelsStayOpen-headingOne"&gt;
                          |      &lt;div class="accordion-body"&gt;
                          |        &lt;p&gt;&lt;b&gt;" This page might not behave as expected because Windows Internet Explorer isn't configured to load unsigned ActiveX controls."&lt;/b&gt; or "Allow this page to install an unsigned ActiveX Control? Doing so from untrusted sources may harm your computer." (Both phrased as conditions that may cause future problems.)
                          |        &lt;/p&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="accordion-item"&gt;
                          |    &lt;h2 class="accordion-header" id="panelsStayOpen-headingTwo"&gt;
                          |      &lt;button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseTwo" aria-expanded="false" aria-controls="panelsStayOpen-collapseTwo"&gt;&lt;i class="svg-wrapper" data-feather="message-circle"&gt;&lt;/i&gt;Chats with others&lt;i class="svg-color" data-feather="chevron-down"&gt;&lt;/i&gt;&lt;/button&gt;
                          |    &lt;/h2&gt;
                          |    &lt;div class="accordion-collapse collapse" id="panelsStayOpen-collapseTwo" aria-labelledby="panelsStayOpen-headingTwo"&gt;
                          |      &lt;div class="accordion-body"&gt;
                          |        &lt;ul class="flex flex-col gap-2 accordions-content"&gt;
                          |          &lt;li&gt;You get the same features in Chat and Chat in Gmail, but the integrated Gmail experience provides a central location to communicate with friends, family, or coworkers between emails.&lt;/li&gt;
                          |          &lt;li&gt;&lt;strong&gt;Chat:&lt;/strong&gt;Use when you prefer a dedicated chat experience and don't mind switching between different apps.&lt;/li&gt;
                          |        &lt;/ul&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="accordion-item"&gt;
                          |    &lt;h2 class="accordion-header" id="panelsStayOpen-headingThree"&gt;
                          |      &lt;button class="accordion-button collapsed gap-2 accordion-light-secondary active txt-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#panelsStayOpen-collapseThree" aria-expanded="false" aria-controls="panelsStayOpen-collapseThree"&gt;
                          |        &lt;i class="svg-wrapper" data-feather="check-square"&gt;&lt;/i&gt;Right way to code
                          |        &lt;i class="svg-color" data-feather="chevron-down"&gt;&lt;/i&gt;
                          |      &lt;/button&gt;
                          |    &lt;/h2&gt;
                          |    &lt;div class="accordion-collapse collapse" id="panelsStayOpen-collapseThree" aria-labelledby="panelsStayOpen-headingThree"&gt;
                          |      &lt;div class="accordion-body"&gt;
                          |        &lt;ul class="flex flex-col gap-2 accordions-content"&gt; 
                          |          &lt;li&gt;1) Decide on the indentation and keep it that way.&lt;/li&gt;
                          |          &lt;li&gt;2) Make comments.&lt;/li&gt;
                          |          &lt;li&gt;3) Consistent name scheme.&lt;/li&gt;
                          |          &lt;li&gt;4) Don't repeat code.&lt;/li&gt;
                          |          &lt;li&gt;5) Avoid writing long code lines.&lt;/li&gt;
                          |          &lt;li&gt;6) Break down a big task into smaller chunks.&lt;/li&gt;
                          |          &lt;li&gt;7) Organize your program into smaller files.&lt;/li&gt;
                          |          &lt;li&gt;8) Write clever code that is also readable.&lt;/li&gt;
                          |        &lt;/ul&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 xl:col-span-12")
                .card
                  .card-header
                    h5 Outline Accordion
                    p.f-m-light.mt-1 
                      | Made custom 
                      code accordion-wrapper
                      |  class use to bring border-left side.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body 
                    #outlineaccordion.accordion-1.accordion.dark-accordion
                      .accordion-item.accordion-wrapper
                        h2#outlineaccordionone.accordion-header
                          button.accordion-button.collapsed.accordion-light-primary.txt-primary(type='button' data-bs-toggle='collapse' data-bs-target='#left-collapseOne' aria-expanded='true' aria-controls='left-collapseOne')
                            | What do web designers do?
                            i.svg-color(data-feather='chevron-down')
                        #left-collapseOne.accordion-collapse.collapse(aria-labelledby='outlineaccordionone' data-bs-parent='#outlineaccordion')
                          .accordion-body
                            p 
                              | Web design
                              b  identifies the goals
                              |  of a website or webpage and promotes accessibility for all potential users. This process involves organizing content and images across a series of pages and integrating applications and other interactive elements.
                      .accordion-item.accordion-wrapper
                        h2#outlineaccordiontwo.accordion-header
                          button.accordion-button.collapsed.accordion-light-primary.txt-primary(type='button' data-bs-toggle='collapse' data-bs-target='#left-collapseTwo' aria-expanded='false' aria-controls='left-collapseTwo')
                            | What is the use of web design?
                            i.svg-color(data-feather='chevron-down')
                        #left-collapseTwo.accordion-collapse.collapse(aria-labelledby='outlineaccordiontwo' data-bs-parent='#outlineaccordion')
                          .accordion-body
                            ul.flex.flex-col.gap-2.accordions-content
                              li
                                strong  Search engine optimization: 
                                | Search engine optimization (SEO) is a method for improving the chances for a website to be found by search engines. Web design codes information in a way that search engines can read it. It can boost business because the site shows up on the top search result pages, helping people to find it.
                              li
                                strong  Mobile responsiveness:
                                |  Mobile responsiveness is the feature of a website that allows it to display on a mobile device and adapt its layout and proportions to be legible. Web design ensures sites are easy to view and navigate from mobile devices. When a website is well-designed and mobile-responsive, customers can reach the business with ease.
                              li 
                                strong  Improved sales:
                                | Increasing the number of items sold or acquiring more active customers are objectives of a compelling website. As web design reaches targeted customers and search engines, it helps the business make conversions on their site and improve its sales.
                      .accordion-item.accordion-wrapper
                        h2#outlineaccordionthree.accordion-header
                          button.accordion-button.collapsed.accordion-light-primary.txt-primary(type='button' data-bs-toggle='collapse' data-bs-target='#left-collapseThree' aria-expanded='false' aria-controls='left-collapseThree')
                            | What are the elements of web design?
                            i.svg-color(data-feather='chevron-down')
                        #left-collapseThree.accordion-collapse.collapse(aria-labelledby='outlineaccordionthree' data-bs-parent='#outlineaccordion')
                          .accordion-body
                            ul.flex.flex-col.gap-2.accordions-content
                              li  The web design process allows designers to adjust to any preferences and provide effective solutions. There are many standard components of every web design, including:
                              li --&gt; Layout
                              li --&gt; Images
                              li --&gt; Visual hierarchy
                              li --&gt; Color scheme
                              li --&gt; Typography
                              li --&gt; Navigation
                              li --&gt; Readability
                              li --&gt; Content
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#left-according', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#left-according
                          |&lt;div class="accordion dark-accordion" id="outlineaccordion"&gt;
                          |  &lt;div class="accordion-item accordion-wrapper"&gt;
                          |    &lt;h2 class="accordion-header" id="outlineaccordionone"&gt;
                          |      &lt;button class="accordion-button collapsed accordion-light-primary txt-primary" type="button" data-bs-toggle="collapse" data-bs-target="#left-collapseOne" aria-expanded="true" aria-controls="left-collapseOne"&gt;What do web designers do?
                          |        &lt;i class="svg-color" data-feather="chevron-down"&gt;&lt;/i&gt;
                          |      &lt;/button&gt;
                          |    &lt;/h2&gt;
                          |    &lt;div class="accordion-collapse collapse" id="left-collapseOne" aria-labelledby="outlineaccordionone" data-bs-parent="#outlineaccordion"&gt;
                          |      &lt;div class="accordion-body"&gt;
                          |        &lt;p&gt;Web design&lt;b&gt; identifies the goals&lt;/b&gt;of a website or webpage and promotes accessibility for all potential users. This process involves organizing content and images across a series of pages and integrating applications and other interactive elements.&lt;/p&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="accordion-item accordion-wrapper"&gt;
                          |    &lt;h2 class="accordion-header" id="outlineaccordiontwo"&gt;
                          |      &lt;button class="accordion-button collapsed accordion-light-primary txt-primary" type="button" data-bs-toggle="collapse" data-bs-target="#left-collapseTwo" aria-expanded="false" aria-controls="left-collapseTwo"&gt;What is the use of web design?
                          |        &lt;i class="svg-color" data-feather="chevron-down"&gt;&lt;/i&gt;
                          |      &lt;/button&gt;
                          |    &lt;/h2&gt;
                          |    &lt;div class="accordion-collapse collapse" id="left-collapseTwo" aria-labelledby="outlineaccordiontwo" data-bs-parent="#outlineaccordion"&gt;
                          |      &lt;div class="accordion-body"&gt;
                          |        &lt;ul class="flex flex-col gap-2 accordions-content"&gt;
                          |          &lt;li&gt;
                          |            &lt;strong&gt; Search engine optimization:&lt;/strong&gt;Search engine optimization (SEO) is a method for improving the chances for a website to be found by search engines. Web design codes information in a way that search engines can read it. It can boost business because the site shows up on the top search result pages, helping people to find it.
                          |          &lt;/li&gt;
                          |          &lt;li&gt;
                          |            &lt;strong&gt; Mobile responsiveness:&lt;/strong&gt;Mobile responsiveness is the feature of a website that allows it to display on a mobile device and adapt its layout and proportions to be legible. Web design ensures sites are easy to view and navigate from mobile devices. When a website is well-designed and mobile-responsive, customers can reach the business with ease.
                          |          &lt;/li&gt;
                          |          &lt;li&gt;
                          |            &lt;strong&gt; Improved sales:&lt;/strong&gt;Increasing the number of items sold or acquiring more active customers are objectives of a compelling website. As web design reaches targeted customers and search engines, it helps the business make conversions on their site and improve its sales.
                          |          &lt;/li&gt;
                          |        &lt;/ul&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |  &lt;div class="accordion-item accordion-wrapper"&gt;
                          |    &lt;h2 class="accordion-header" id="outlineaccordionthree"&gt;
                          |      &lt;button class="accordion-button collapsed accordion-light-primary txt-primary" type="button" data-bs-toggle="collapse" data-bs-target="#left-collapseThree" aria-expanded="false" aria-controls="left-collapseThree"&gt;What are the elements of web design?
                          |        &lt;i class="svg-color" data-feather="chevron-down"&gt;&lt;/i&gt;
                          |      &lt;/button&gt;
                          |    &lt;/h2&gt;
                          |    &lt;div class="accordion-collapse collapse" id="left-collapseThree" aria-labelledby="outlineaccordionthree" data-bs-parent="#outlineaccordion"&gt;
                          |      &lt;div class="accordion-body"&gt;
                          |        &lt;ul class="flex flex-col gap-2 accordions-content"&gt;
                          |          &lt;li&gt; The web design process allows designers to adjust to any preferences and provide effective solutions. There are many standard components of every web design, including:&lt;/li&gt;
                          |          &lt;li&gt;--&gt; Layout&lt;/li&gt;
                          |          &lt;li&gt;--&gt; Images&lt;/li&gt;
                          |          &lt;li&gt;--&gt; Visual hierarchy&lt;/li&gt;
                          |          &lt;li&gt;--&gt; Color scheme&lt;/li&gt;
                          |          &lt;li&gt;--&gt; Typography&lt;/li&gt;
                          |          &lt;li&gt;--&gt; Navigation&lt;/li&gt;
                          |          &lt;li&gt;--&gt; Readability&lt;/li&gt;
                          |          &lt;li&gt;--&gt; Content&lt;/li&gt;
                          |        &lt;/ul&gt;
                          |      &lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 md:col-span-12")
                .card.multiple-collapse
                  .card-header
                    h5 Horizontal Accordion
                    p.f-m-light.mt-1
                      | Add the 
                      code collapse-horizontal
                      |  modifier class to transition the width instead of height and set a width on the immediate child element.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body
                    .common-flex
                      button.btn.btn-secondary.text-white(type='button' data-bs-toggle='collapse' data-bs-target='#collapseWidthExample' aria-expanded='false' aria-controls='collapseWidthExample')
                        | Toggle width Collapse
                    .grid.grid-cols-12.card-gap 
                      div(class="col-span-8 xxl:col-span-12")
                        #collapseWidthExample.collapse.collapse-horizontal.mt-3
                          .card.card-body.accordion-h-space.mb-0
                            | This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.
                    .code-box-copy
                      button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#horizontal-according', title='Copy')
                        i.icofont.icofont-copy-alt
                      pre.custom-scrollbar
                        code.language-html#horizontal-according
                          |&lt;div class="common-flex"&gt;
                          |  &lt;button class="btn btn-secondary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseWidthExample" aria-expanded="false" aria-controls="collapseWidthExample"&gt;Toggle Width Collapse&lt;/button&gt;
                          |&lt;/div&gt;
                          |&lt;div class="grid"&gt; 
                          |  &lt;div class="col-span-6 xxl:col-span-12"&gt;
                          |    &lt;div class="collapse collapse-horizontal mt-3" id="collapseWidthExample"&gt;
                          |      &lt;div class="card card-body accordion-h-space mb-0"&gt;This is some placeholder content for a horizontal collapse. It's hidden by default and shown when triggered.&lt;/div&gt;
                          |    &lt;/div&gt;
                          |  &lt;/div&gt;
                          |&lt;/div&gt;
              div(class="col-span-6 md:col-span-12")
                .card.multiple-collapse
                  .card-header
                    h5 Collapse Accordion
                    p.f-m-light.mt-1
                      | you can also use a link with the href attribute
                      code (and a role="button").
                      | In both cases, the 
                      code data-bs-toggle="collapse"
                      |  is required.
                    .card-header-right
                      ul.list-unstyled.card-option
                        li
                          i.fa-solid.fa-gear.fa-spin
                        li
                          i.view-html.fa-solid.fa-code
                        li
                          i.icofont.icofont-maximize.full-card
                        li
                          i.icofont.icofont-minus.minimize-card
                        li
                          i.icofont.icofont-refresh.reload-card
                        li
                          i.icofont.icofont-error.close-card  
                  .card-body.collapse-accordion
                    p.common-flex
                      a.btn.btn-dark.text-white(data-bs-toggle='collapse' href='#collapseExample' role='button' aria-expanded='false' aria-controls='collapseExample')
                        | Link With Href
                      button.btn.btn-dark.text-white(type='button' data-bs-toggle='collapse' data-bs-target='#collapseExample' aria-expanded='false' aria-controls='collapseExample')
                        | Button With Data-bs-target
                    #collapseExample.collapse.btn-dark
                      .card.card-body.mb-0.mt-2.dark-accordion
                        | Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
                    .code-box-copy
                        button.code-box-copy__btn.btn-clipboard(data-clipboard-target='#collapse-according', title='Copy')
                          i.icofont.icofont-copy-alt
                        pre.custom-scrollbar
                          code.language-html#collapse-according
                            |&lt;p class="common-flex"&gt;
                            |  &lt;a class="btn btn-dark" data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample"&gt;Link With Href&lt;/a&gt;
                            |  &lt;button class="btn btn-dark" type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample"&gt;Button With Data-bs-target&lt;/button&gt;
                            |&lt;/p&gt;
                            |&lt;div class="collapse btn-dark" id="collapseExample"&gt;
                            |  &lt;div class="card card-body mb-0 dark-accordion"&gt;Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.&lt;/div&gt;
                            |&lt;/div&gt;
          // Container-fluid Ends
        include ../../components/footer
    include ../../components/footer-files
