How to open all accordions in one click?

user_16309201 0
Viewed 63

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/popper.js@1.12.9/dist/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/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/bootstrap@4.0.0/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>

bootstrap-4 css html jquery
1 Answers

Show or Hide Collapse based on the button clicked (i.e. Button-A or Button-B)

//Event after tab is shown
$('a[data-toggle=tab]').on('shown.bs.tab', function () {
    let elem = $(this);
    let tabSelector = elem.attr('href');
    $(tabSelector).find('.collapse').collapse(elem.text().trim() == 'Button-A' ? 'hide' : 'show');
});
user_193689260
Related