آکاردئون (Accordion)

<!-- Accordion basic -->
<div class="accordion" id="accordionExample">

  <!-- Accordion item -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Accordion Item #1</button>
    </h2>
    <div class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample" id="collapseOne">
      <div class="accordion-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, quaerat. Corporis pariatur cum dolorem ullam at nulla ex doloribus, ratione quos repellendus aliquid aspernatur obcaecati adipisci maxime id, sed cupiditate.</div>
    </div>
  </div>

  <!-- Accordion item -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Accordion Item #2</button>
    </h2>
    <div class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample" id="collapseTwo">
      <div class="accordion-body">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque dicta enim cupiditate natus dolorum distinctio, impedit tenetur nisi laboriosam ut animi delectus quod quos ipsum corporis magnam, nobis neque mollitia.</div>
    </div>
  </div>

  <!-- Accordion item -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Accordion Item #3</button>
    </h2>
    <div class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample" id="collapseThree">
      <div class="accordion-body">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ut accusantium ea a ipsa, aliquam nemo aperiam porro deserunt aspernatur sequi amet voluptatibus, fugiat nobis. Atque voluptatibus quibusdam placeat voluptas?</div>
    </div>
  </div>
</div>

// Accordion basic
.accordion#accordionExample

  // Accordion item
  .accordion-item
    h2.accordion-header#headingOne
      button(type="button", data-bs-toggle="collapse", data-bs-target="#collapseOne", aria-expanded="true", aria-controls="collapseOne").accordion-button
        | Accordion Item #1
    div(aria-labelledby="headingOne", data-bs-parent="#accordionExample").accordion-collapse.collapse.show#collapseOne
      .accordion-body
        | Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, quaerat. Corporis pariatur cum dolorem ullam at nulla ex doloribus, ratione quos repellendus aliquid aspernatur obcaecati adipisci maxime id, sed cupiditate.

  // Accordion item
  .accordion-item
    h2.accordion-header#headingTwo
      button(type="button", data-bs-toggle="collapse", data-bs-target="#collapseTwo", aria-expanded="false", aria-controls="collapseTwo").accordion-button.collapsed
        | Accordion Item #2
    div(aria-labelledby="headingTwo", data-bs-parent="#accordionExample").accordion-collapse.collapse#collapseTwo
      .accordion-body
        | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque dicta enim cupiditate natus dolorum distinctio, impedit tenetur nisi laboriosam ut animi delectus quod quos ipsum corporis magnam, nobis neque mollitia.

  // Accordion item
  .accordion-item
    h2.accordion-header#headingThree
      button(type="button", data-bs-toggle="collapse", data-bs-target="#collapseThree", aria-expanded="false", aria-controls="collapseThree").accordion-button.collapsed
        | Accordion Item #3
    div(aria-labelledby="headingThree", data-bs-parent="#accordionExample").accordion-collapse.collapse#collapseThree
      .accordion-body
        | Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ut accusantium ea a ipsa, aliquam nemo aperiam porro deserunt aspernatur sequi amet voluptatibus, fugiat nobis. Atque voluptatibus quibusdam placeat voluptas?

<!-- Accordion light -->
<div class="accordion accordion-light" id="accordionExample">

  <!-- Accordion light item -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingOne">
      <button class="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">Accordion Item #1</button>
    </h2>
    <div class="accordion-collapse collapse show" aria-labelledby="headingOne" data-bs-parent="#accordionExample" id="collapseOne">
      <div class="accordion-body text-light opacity-70">Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, quaerat. Corporis pariatur cum dolorem ullam at nulla ex doloribus, ratione quos repellendus aliquid aspernatur obcaecati adipisci maxime id, sed cupiditate.</div>
    </div>
  </div>

  <!-- Accordion light item -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingTwo">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">Accordion Item #2</button>
    </h2>
    <div class="accordion-collapse collapse" aria-labelledby="headingTwo" data-bs-parent="#accordionExample" id="collapseTwo">
      <div class="accordion-body text-light opacity-70">Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque dicta enim cupiditate natus dolorum distinctio, impedit tenetur nisi laboriosam ut animi delectus quod quos ipsum corporis magnam, nobis neque mollitia.</div>
    </div>
  </div>

  <!-- Accordion light item -->
  <div class="accordion-item">
    <h2 class="accordion-header" id="headingThree">
      <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree" aria-expanded="false" aria-controls="collapseThree">Accordion Item #3</button>
    </h2>
    <div class="accordion-collapse collapse" aria-labelledby="headingThree" data-bs-parent="#accordionExample" id="collapseThree">
      <div class="accordion-body text-light opacity-70">Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ut accusantium ea a ipsa, aliquam nemo aperiam porro deserunt aspernatur sequi amet voluptatibus, fugiat nobis. Atque voluptatibus quibusdam placeat voluptas?</div>
    </div>
  </div>
</div>

// Accordion light
.accordion.accordion-light#accordionExample

  // Accordion light item
  .accordion-item
    h2.accordion-header#headingOne
      button(type="button", data-bs-toggle="collapse", data-bs-target="#collapseOne", aria-expanded="true", aria-controls="collapseOne").accordion-button
        | Accordion Item #1
    div(aria-labelledby="headingOne", data-bs-parent="#accordionExample").accordion-collapse.collapse.show#collapseOne
      .accordion-body.text-light.opacity-70
        | Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum, quaerat. Corporis pariatur cum dolorem ullam at nulla ex doloribus, ratione quos repellendus aliquid aspernatur obcaecati adipisci maxime id, sed cupiditate.

  // Accordion light item
  .accordion-item
    h2.accordion-header#headingTwo
      button(type="button", data-bs-toggle="collapse", data-bs-target="#collapseTwo", aria-expanded="false", aria-controls="collapseTwo").accordion-button.collapsed
        | Accordion Item #2
    div(aria-labelledby="headingTwo", data-bs-parent="#accordionExample").accordion-collapse.collapse#collapseTwo
      .accordion-body.text-light.opacity-70
        | Lorem ipsum dolor, sit amet consectetur adipisicing elit. Cumque dicta enim cupiditate natus dolorum distinctio, impedit tenetur nisi laboriosam ut animi delectus quod quos ipsum corporis magnam, nobis neque mollitia.

  // Accordion light item
  .accordion-item
    h2.accordion-header#headingThree
      button(type="button", data-bs-toggle="collapse", data-bs-target="#collapseThree", aria-expanded="false", aria-controls="collapseThree").accordion-button.collapsed
        | Accordion Item #3
    div(aria-labelledby="headingThree", data-bs-parent="#accordionExample").accordion-collapse.collapse#collapseThree
      .accordion-body.text-light.opacity-70
        | Lorem ipsum dolor sit amet consectetur adipisicing elit. Libero ut accusantium ea a ipsa, aliquam nemo aperiam porro deserunt aspernatur sequi amet voluptatibus, fugiat nobis. Atque voluptatibus quibusdam placeat voluptas?

<!-- Card based accordion -->
<div id="accordionCards">

  <!-- Card -->
  <div class="card bg-secondary mb-2" data-bs-toggle="collapse" data-bs-target="#cardCollapse1">
    <div class="card-body">
      <div class="d-flex justify-content-between mb-2">
        <div class="d-flex align-items-center">
          <img class="me-2" src="path-to-image" width="24" alt="IT Pro TV">
          <span class="fs-sm text-dark opacity-80 ps-1">IT Pro TV</span>
        </div>
        <span class="badge bg-faded-danger rounded-pill fs-sm">Hot</span>
      </div>
      <h3 class="h6 card-title pt-1 mb-0">Business Analyst</h3>
    </div>
    <div class="collapse show" id="cardCollapse1" data-bs-parent="#accordionCards">
      <div class="card-body mt-n1 pt-0">
        <p class="fs-sm">Euismod nec sagittis sit arcu libero, metus. Aliquam nisl rhoncus porttitor volutpat, ante cras tincidunt. Nec sit nunc, ornare tincidunt enim, neque. Ornare pulvinar enim fames orci enim in libero. <a href='#'>Read more...</a></p>
        <div class="d-flex align-items-center justify-content-between"> 
          <div class="fs-sm">
            <span class="text-nowrap me-3">
              <i class="fi-map-pin text-muted me-1"></i>
              New York
            </span>
            <span class="text-nowrap me-3">
              <i class="fi-cash fs-base text-muted me-1"></i>
              $7,500
            </span>
          </div>
          <button class="btn btn-icon btn-light btn-xs text-primary shadow-sm rounded-circle" type="button" data-bs-toggle="tooltip" title="افزودن به علاقه مندی">
            <i class="fi-heart"></i>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Card -->
  <div class="card bg-secondary collapsed mb-2" data-bs-toggle="collapse" data-bs-target="#cardCollapse2">
    <div class="card-body">
      <div class="d-flex justify-content-between mb-2">
        <div class="d-flex align-items-center">
          <img class="me-2" src="path-to-image" width="24" alt="Xbox">
          <span class="fs-sm text-dark opacity-80 ps-1">Xbox Company</span>
        </div>
        <span class="badge bg-faded-accent rounded-pill fs-sm">Featured</span>
      </div>
      <h3 class="h6 card-title pt-1 mb-0">Full-Stack Developer</h3>
    </div>
    <div class="collapse" id="cardCollapse2" data-bs-parent="#accordionCards">
      <div class="card-body mt-n1 pt-0">
        <p class="fs-sm">Euismod nec sagittis sit arcu libero, metus. Aliquam nisl rhoncus porttitor volutpat, ante cras tincidunt. Nec sit nunc, ornare tincidunt enim, neque. Ornare pulvinar enim fames orci enim in libero. <a href='#'>Read more...</a></p>
        <div class="d-flex align-items-center justify-content-between"> 
          <div class="fs-sm">
            <span class="text-nowrap me-3">
              <i class="fi-map-pin text-muted me-1"></i>
              Washington
            </span>
            <span class="text-nowrap me-3">
              <i class="fi-cash fs-base text-muted me-1"></i>
              $10,000
            </span>
          </div>
          <button class="btn btn-icon btn-light btn-xs text-primary shadow-sm rounded-circle" type="button" data-bs-toggle="tooltip" title="افزودن به علاقه مندی">
            <i class="fi-heart"></i>
          </button>
        </div>
      </div>
    </div>
  </div>

  <!-- Card -->
  <div class="card bg-secondary collapsed mb-2" data-bs-toggle="collapse" data-bs-target="#cardCollapse3">
    <div class="card-body">
      <div class="d-flex justify-content-between mb-2">
        <div class="d-flex align-items-center">
          <img class="me-2" src="path-to-image" width="24" alt="XAMPP">
          <span class="fs-sm text-dark opacity-80 ps-1">XAMPP Company</span>
        </div>
        <span class="badge bg-faded-danger rounded-pill fs-sm">Hot</span>
      </div>
      <h3 class="h6 card-title pt-1 mb-0">Account Manager</h3>
    </div>
    <div class="collapse" id="cardCollapse3" data-bs-parent="#accordionCards">
      <div class="card-body mt-n1 pt-0">
        <p class="fs-sm">Euismod nec sagittis sit arcu libero, metus. Aliquam nisl rhoncus porttitor volutpat, ante cras tincidunt. Nec sit nunc, ornare tincidunt enim, neque. Ornare pulvinar enim fames orci enim in libero. <a href='#'>Read more...</a></p>
        <div class="d-flex align-items-center justify-content-between"> 
          <div class="fs-sm">
            <span class="text-nowrap me-3">
              <i class="fi-map-pin text-muted me-1"></i>
              Los Angeles
            </span>
            <span class="text-nowrap me-3">
              <i class="fi-cash fs-base text-muted me-1"></i>
              $8,200
            </span>
          </div>
          <button class="btn btn-icon btn-light btn-xs text-primary shadow-sm rounded-circle" type="button" data-bs-toggle="tooltip" title="افزودن به علاقه مندی">
            <i class="fi-heart"></i>
          </button>
        </div>
      </div>
    </div>
  </div>
</div>

// Card based accordion
div#accordionCards

  // Card
  .card.bg-secondary.mb-2(data-bs-toggle="collapse", data-bs-target="#cardCollapse1")
    .card-body
      .d-flex.justify-content-between.mb-2
        .d-flex.align-items-center
          img(src="path-to-image", width="24", alt="IT Pro TV").me-2
          span.fs-sm.text-dark.opacity-80.ps-1 IT Pro TV
        span.badge.bg-faded-danger.rounded-pill.fs-sm Hot
      h3.h6.card-title.pt-1.mb-0 Business Analyst
    .collapse.show(id="cardCollapse1", data-bs-parent="#accordionCards")
      .card-body.mt-n1.pt-0
        p.fs-sm Euismod nec sagittis sit arcu libero, metus. Aliquam nisl rhoncus porttitor volutpat, ante cras tincidunt. Nec sit nunc, ornare tincidunt enim, neque. Ornare pulvinar enim fames orci enim in libero. <a href="#">Read more...</a>
        .d-flex.align-items-center.justify-content-between 
          .fs-sm
            span.text-nowrap.me-3
              i.fi-map-pin.text-muted.me-1 
              | New York
            span.text-nowrap.me-3
              i.fi-cash.fs-base.text-muted.me-1
              | $7,500
          button(type="button", data-bs-toggle="tooltip", title="افزودن به علاقه مندی").btn.btn-icon.btn-light.btn-xs.text-primary.shadow-sm.rounded-circle
            i.fi-heart
  
  // Card
  .card.bg-secondary.collapsed.mb-2(data-bs-toggle="collapse", data-bs-target="#cardCollapse2")
    .card-body
      .d-flex.justify-content-between.mb-2
        .d-flex.align-items-center
          img(src="path-to-image", width="24", alt="Xbox").me-2
          span.fs-sm.text-dark.opacity-80.ps-1 Xbox Company
        span.badge.bg-faded-accent.rounded-pill.fs-sm Featured
      h3.h6.card-title.pt-1.mb-0 Full-Stack Developer
    .collapse(id="cardCollapse2", data-bs-parent="#accordionCards")
      .card-body.mt-n1.pt-0
        p.fs-sm Euismod nec sagittis sit arcu libero, metus. Aliquam nisl rhoncus porttitor volutpat, ante cras tincidunt. Nec sit nunc, ornare tincidunt enim, neque. Ornare pulvinar enim fames orci enim in libero. <a href="#">Read more...</a>
        .d-flex.align-items-center.justify-content-between 
          .fs-sm
            span.text-nowrap.me-3
              i.fi-map-pin.text-muted.me-1 
              | Washington
            span.text-nowrap.me-3
              i.fi-cash.fs-base.text-muted.me-1
              | $10,000
          button(type="button", data-bs-toggle="tooltip", title="افزودن به علاقه مندی").btn.btn-icon.btn-light.btn-xs.text-primary.shadow-sm.rounded-circle
            i.fi-heart
  
  // Card
  .card.bg-secondary.collapsed.mb-2(data-bs-toggle="collapse", data-bs-target="#cardCollapse3")
    .card-body
      .d-flex.justify-content-between.mb-2
        .d-flex.align-items-center
          img(src="path-to-image", width="24", alt="XAMPP").me-2
          span.fs-sm.text-dark.opacity-80.ps-1 XAMPP Company
        span.badge.bg-faded-danger.rounded-pill.fs-sm Hot
      h3.h6.card-title.pt-1.mb-0 Account Manager
    .collapse(id="cardCollapse3", data-bs-parent="#accordionCards")
      .card-body.mt-n1.pt-0
        p.fs-sm Euismod nec sagittis sit arcu libero, metus. Aliquam nisl rhoncus porttitor volutpat, ante cras tincidunt. Nec sit nunc, ornare tincidunt enim, neque. Ornare pulvinar enim fames orci enim in libero. <a href="#">Read more...</a>
        .d-flex.align-items-center.justify-content-between 
          .fs-sm
            span.text-nowrap.me-3
              i.fi-map-pin.text-muted.me-1 
              | Los Angeles
            span.text-nowrap.me-3
              i.fi-cash.fs-base.text-muted.me-1
              | $8,200
          button(type="button", data-bs-toggle="tooltip", title="افزودن به علاقه مندی").btn.btn-icon.btn-light.btn-xs.text-primary.shadow-sm.rounded-circle
            i.fi-heart