How to open all accordions in one click?

Question

I have two buttons side by side:

Button-A shows all the headings and Button-B have all the headings with descriptions. What I am trying to do is when the user clicks on Button-A any element it will switch to Button-B and open the Button-B all accordions or when the user clicks on Button-B it will directly open all accordion of button-B, but Button-A remains same no open accordions.

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link href="https://kit-pro.fontawesome.com/releases/v5.15.4/css/pro.min.css" rel="stylesheet" />
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">

<div class="col-lg-12 mt-5 tab-accrd">
  <ul class="nav nav-tabs" id="myTab" role="tablist">
    <li class="nav-item">
      <a class="nav-link active" id="home-tab" data-toggle="tab" href="#home2" role="tab" aria-controls="home2" aria-selected="true">Button-A</a>
    </li>
    <li class="nav-item ml-3">
      <a class="nav-link" id="home-tab" data-toggle="tab" href="#home2" role="tab" aria-controls="home2" aria-selected="true">Button-B</a>
    </li>

  </ul>
  <div class="tab-content mt-1" id="myTabContent">
    <div class="tab-pane fade show active" id="home2" role="tabpanel" aria-labelledby="home-tab">
      <div id="accordion" role="tablist" aria-multiselectable="true">

        <!-- Accordion Item 1 -->
        <div class="card">
          <div class="card-header" role="tab" id="accordionHeadingOne1">
            <div class="mb-0 row">
              <div class="col-12 no-padding accordion-head">
                <a data-toggle="collapse" data-parent="#accordion" href="#accordionBodyOne1" aria-expanded="false" aria-controls="accordionBodyOne1" class="collapsed acc-head">
                  <i class="fas fa-caret-square-down" aria-hidden="true"></i>

                  <h5> <span>1</span>&nbsp;&nbsp;Accordion Item 1 - Heading</h5>
                </a>
              </div>
            </div>
          </div>

          <div id="accordionBodyOne1" class="collapse" role="tabpanel" aria-labelledby="accordionHeadingOne1" aria-expanded="false" data-parent="accordion">
            <div class="card-block col-12">
              <p>Accordion Item 1 - Body</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet ante at nisi tempus, maximus bibendum odio consequat. Proin eleifend elit nec facilisis luctus. Donec ut ornare tellus. Proin posuere et leo vel congue. Nunc ipsum eros,
                vestibulum non mi et, porttitor tristique nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum a turpis eu quam bibendum interdum a quis erat. Fusce porta odio sed nulla ultrices,
                gravida viverra nunc imperdiet.
              </p>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" role="tab" id="accordionHeadingOne1">
            <div class="mb-0 row">
              <div class="col-12 no-padding accordion-head">
                <a data-toggle="collapse" data-parent="#accordion" href="#accordionBodyOne1" aria-expanded="false" aria-controls="accordionBodyOne1" class="collapsed acc-head">
                  <i class="fas fa-caret-square-down" aria-hidden="true"></i>

                  <h5> <span>1</span>&nbsp;&nbsp;Accordion Item 1 - Heading</h5>
                </a>
              </div>
            </div>
          </div>

          <div id="accordionBodyOne1" class="collapse" role="tabpanel" aria-labelledby="accordionHeadingOne1" aria-expanded="false" data-parent="accordion">
            <div class="card-block col-12">
              <p>Accordion Item 1 - Body</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet ante at nisi tempus, maximus bibendum odio consequat. Proin eleifend elit nec facilisis luctus. Donec ut ornare tellus. Proin posuere et leo vel congue. Nunc ipsum eros,
                vestibulum non mi et, porttitor tristique nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum a turpis eu quam bibendum interdum a quis erat. Fusce porta odio sed nulla ultrices,
                gravida viverra nunc imperdiet.
              </p>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" role="tab" id="accordionHeadingOne1">
            <div class="mb-0 row">
              <div class="col-12 no-padding accordion-head">
                <a data-toggle="collapse" data-parent="#accordion" href="#accordionBodyOne1" aria-expanded="false" aria-controls="accordionBodyOne1" class="collapsed acc-head">
                  <i class="fas fa-caret-square-down" aria-hidden="true"></i>

                  <h5> <span>1</span>&nbsp;&nbsp;Accordion Item 1 - Heading</h5>
                </a>
              </div>
            </div>
          </div>

          <div id="accordionBodyOne1" class="collapse" role="tabpanel" aria-labelledby="accordionHeadingOne1" aria-expanded="false" data-parent="accordion">
            <div class="card-block col-12">
              <p>Accordion Item 1 - Body</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet ante at nisi tempus, maximus bibendum odio consequat. Proin eleifend elit nec facilisis luctus. Donec ut ornare tellus. Proin posuere et leo vel congue. Nunc ipsum eros,
                vestibulum non mi et, porttitor tristique nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum a turpis eu quam bibendum interdum a quis erat. Fusce porta odio sed nulla ultrices,
                gravida viverra nunc imperdiet.
              </p>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" role="tab" id="accordionHeadingOne1">
            <div class="mb-0 row">
              <div class="col-12 no-padding accordion-head">
                <a data-toggle="collapse" data-parent="#accordion" href="#accordionBodyOne1" aria-expanded="false" aria-controls="accordionBodyOne1" class="collapsed acc-head">
                  <i class="fas fa-caret-square-down" aria-hidden="true"></i>

                  <h5> <span>1</span>&nbsp;&nbsp;Accordion Item 1 - Heading</h5>
                </a>
              </div>
            </div>
          </div>

          <div id="accordionBodyOne1" class="collapse" role="tabpanel" aria-labelledby="accordionHeadingOne1" aria-expanded="false" data-parent="accordion">
            <div class="card-block col-12">
              <p>Accordion Item 1 - Body</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet ante at nisi tempus, maximus bibendum odio consequat. Proin eleifend elit nec facilisis luctus. Donec ut ornare tellus. Proin posuere et leo vel congue. Nunc ipsum eros,
                vestibulum non mi et, porttitor tristique nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum a turpis eu quam bibendum interdum a quis erat. Fusce porta odio sed nulla ultrices,
                gravida viverra nunc imperdiet.
              </p>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" role="tab" id="accordionHeadingOne1">
            <div class="mb-0 row">
              <div class="col-12 no-padding accordion-head">
                <a data-toggle="collapse" data-parent="#accordion" href="#accordionBodyOne1" aria-expanded="false" aria-controls="accordionBodyOne1" class="collapsed acc-head">
                  <i class="fas fa-caret-square-down" aria-hidden="true"></i>

                  <h5> <span>1</span>&nbsp;&nbsp;Accordion Item 1 - Heading</h5>
                </a>
              </div>
            </div>
          </div>

          <div id="accordionBodyOne1" class="collapse" role="tabpanel" aria-labelledby="accordionHeadingOne1" aria-expanded="false" data-parent="accordion">
            <div class="card-block col-12">
              <p>Accordion Item 1 - Body</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet ante at nisi tempus, maximus bibendum odio consequat. Proin eleifend elit nec facilisis luctus. Donec ut ornare tellus. Proin posuere et leo vel congue. Nunc ipsum eros,
                vestibulum non mi et, porttitor tristique nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum a turpis eu quam bibendum interdum a quis erat. Fusce porta odio sed nulla ultrices,
                gravida viverra nunc imperdiet.
              </p>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" role="tab" id="accordionHeadingOne1">
            <div class="mb-0 row">
              <div class="col-12 no-padding accordion-head">
                <a data-toggle="collapse" data-parent="#accordion" href="#accordionBodyOne1" aria-expanded="false" aria-controls="accordionBodyOne1" class="collapsed acc-head">
                  <i class="fas fa-caret-square-down" aria-hidden="true"></i>

                  <h5> <span>1</span>&nbsp;&nbsp;Accordion Item 1 - Heading</h5>
                </a>
              </div>
            </div>
          </div>

          <div id="accordionBodyOne1" class="collapse" role="tabpanel" aria-labelledby="accordionHeadingOne1" aria-expanded="false" data-parent="accordion">
            <div class="card-block col-12">
              <p>Accordion Item 1 - Body</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet ante at nisi tempus, maximus bibendum odio consequat. Proin eleifend elit nec facilisis luctus. Donec ut ornare tellus. Proin posuere et leo vel congue. Nunc ipsum eros,
                vestibulum non mi et, porttitor tristique nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum a turpis eu quam bibendum interdum a quis erat. Fusce porta odio sed nulla ultrices,
                gravida viverra nunc imperdiet.
              </p>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" role="tab" id="accordionHeadingOne1">
            <div class="mb-0 row">
              <div class="col-12 no-padding accordion-head">
                <a data-toggle="collapse" data-parent="#accordion" href="#accordionBodyOne1" aria-expanded="false" aria-controls="accordionBodyOne1" class="collapsed acc-head">
                  <i class="fas fa-caret-square-down" aria-hidden="true"></i>

                  <h5> <span>1</span>&nbsp;&nbsp;Accordion Item 1 - Heading</h5>
                </a>
              </div>
            </div>
          </div>

          <div id="accordionBodyOne1" class="collapse" role="tabpanel" aria-labelledby="accordionHeadingOne1" aria-expanded="false" data-parent="accordion">
            <div class="card-block col-12">
              <p>Accordion Item 1 - Body</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet ante at nisi tempus, maximus bibendum odio consequat. Proin eleifend elit nec facilisis luctus. Donec ut ornare tellus. Proin posuere et leo vel congue. Nunc ipsum eros,
                vestibulum non mi et, porttitor tristique nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum a turpis eu quam bibendum interdum a quis erat. Fusce porta odio sed nulla ultrices,
                gravida viverra nunc imperdiet.
              </p>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" role="tab" id="accordionHeadingOne1">
            <div class="mb-0 row">
              <div class="col-12 no-padding accordion-head">
                <a data-toggle="collapse" data-parent="#accordion" href="#accordionBodyOne1" aria-expanded="false" aria-controls="accordionBodyOne1" class="collapsed acc-head">
                  <i class="fas fa-caret-square-down" aria-hidden="true"></i>

                  <h5> <span>1</span>&nbsp;&nbsp;Accordion Item 1 - Heading</h5>
                </a>
              </div>
            </div>
          </div>

          <div id="accordionBodyOne1" class="collapse" role="tabpanel" aria-labelledby="accordionHeadingOne1" aria-expanded="false" data-parent="accordion">
            <div class="card-block col-12">
              <p>Accordion Item 1 - Body</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet ante at nisi tempus, maximus bibendum odio consequat. Proin eleifend elit nec facilisis luctus. Donec ut ornare tellus. Proin posuere et leo vel congue. Nunc ipsum eros,
                vestibulum non mi et, porttitor tristique nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum a turpis eu quam bibendum interdum a quis erat. Fusce porta odio sed nulla ultrices,
                gravida viverra nunc imperdiet.
              </p>
            </div>
          </div>
        </div>
        <div class="card">
          <div class="card-header" role="tab" id="accordionHeadingOne1">
            <div class="mb-0 row">
              <div class="col-12 no-padding accordion-head">
                <a data-toggle="collapse" data-parent="#accordion" href="#accordionBodyOne1" aria-expanded="false" aria-controls="accordionBodyOne1" class="collapsed acc-head">
                  <i class="fas fa-caret-square-down" aria-hidden="true"></i>

                  <h5> <span>1</span>&nbsp;&nbsp;Accordion Item 1 - Heading</h5>
                </a>
              </div>
            </div>
          </div>

          <div id="accordionBodyOne1" class="collapse" role="tabpanel" aria-labelledby="accordionHeadingOne1" aria-expanded="false" data-parent="accordion">
            <div class="card-block col-12">
              <p>Accordion Item 1 - Body</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet ante at nisi tempus, maximus bibendum odio consequat. Proin eleifend elit nec facilisis luctus. Donec ut ornare tellus. Proin posuere et leo vel congue. Nunc ipsum eros,
                vestibulum non mi et, porttitor tristique nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum a turpis eu quam bibendum interdum a quis erat. Fusce porta odio sed nulla ultrices,
                gravida viverra nunc imperdiet.
              </p>
            </div>
          </div>
        </div>

        <!-- Accordion Item 2 -->
        <div class="card">
          <div class="card-header" role="tab" id="accordionHeadingOne1">
            <div class="mb-0 row">
              <div class="col-12 no-padding accordion-head">
                <a data-toggle="collapse" data-parent="#accordion" href="#accordionBodyOne1" aria-expanded="false" aria-controls="accordionBodyTwo1" class="collapsed acc-head">
                  <i class="fas fa-caret-square-down" aria-hidden="true"></i>
                  <h5> <span>1</span>&nbsp;&nbsp;Accordion Item 1 - Heading</h5>

                </a>
              </div>
            </div>
          </div>

          <div id="accordionBodyOne1" class="collapse" role="tabpanel" aria-labelledby="accordionHeadingOne1" aria-expanded="false" data-parent="accordion">
            <div class="card-block col-12">
              <p>Accordion Item 2 - Body</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet ante at nisi tempus, maximus bibendum odio consequat. Proin eleifend elit nec facilisis luctus. Donec ut ornare tellus. Proin posuere et leo vel congue. Nunc ipsum eros,
                vestibulum non mi et, porttitor tristique nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum a turpis eu quam bibendum interdum a quis erat. Fusce porta odio sed nulla ultrices,
                gravida viverra nunc imperdiet.
              </p>
            </div>
          </div>
        </div>

        <!-- Accordion Item 3 -->
        <div class="card">
          <div class="card-header" role="tab" id="accordionHeadingOne1">
            <div class="mb-0 row">
              <div class="col-12 no-padding accordion-head">
                <a data-toggle="collapse" data-parent="#accordion" href="#accordionBodyOne1" aria-expanded="false" aria-controls="accordionBodyThree1" class="collapsed acc-head">
                  <i class="fas fa-caret-square-down" aria-hidden="true"></i>
                  <h5> <span>1</span>&nbsp;&nbsp;Accordion Item 1 - Heading</h5>

                </a>
              </div>
            </div>
          </div>

          <div id="accordionBodyOne1" class="collapse" role="tabpanel" aria-labelledby="accordionHeadingThree1" aria-expanded="false" data-parent="accordion">
            <div class="card-block col-12">
              <p>Accordion Item 3 - Body</p>
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin laoreet ante at nisi tempus, maximus bibendum odio consequat. Proin eleifend elit nec facilisis luctus. Donec ut ornare tellus. Proin posuere et leo vel congue. Nunc ipsum eros,
                vestibulum non mi et, porttitor tristique nulla. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum a turpis eu quam bibendum interdum a quis erat. Fusce porta odio sed nulla ultrices,
                gravida viverra nunc imperdiet.
              </p>
            </div>
          </div>
        </div>


      </div>
    </div>
  </div>
</div>