javascript bootstrap-5 accordion bootstrap-accordion bootstrap-tabs

When switching from accordion (for mobile) to tab (for desktop), the tab pane shows incorrect name even though content is correct

So, I'm trying to create a nav system, for mobile it should be present in an accordion-like manner and for desktop I want it to be in tabs. I have created it but there's this problem with it:

Suppose on my desktop, "Link #2" tab is opened when I switch to mobile version the same tab is opened in accordion BUT if I open some other tab in accordion say "Link #3" and then if I switch to desktop version, the desktop tab shows the content of "Link #3" but under "Link #2" pane.

And, if I hide all the three tabs in accordion (i.e. no content is visible only the headers ("Link#1" etc.) are visible) and then switch to desktop, no content is shown.

I searched but didn't find anything where someone tried to combine accordion and tabs.

I have just started learning Bootstrap and JavaScript so I apologise if I'm making some noob mistake. Please guide me towards the solution!

.container .nav-tabs {
   display: none;
}

/* MEDIA QUERY */
@media screen and (min-width: 600px) {
   .container .nav-tabs {
      display: flex;
   }
   .accordion-item h2 {
      display: none;
   }
   .container .accordion-item {
      border: none;
   }
}

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Bootstrap demo</title>

    <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">

    
  </head>
  <body>
    <div class="container">
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link active" aria-current="page" href="#flush-collapseOne" data-bs-toggle="tab">Link #1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#flush-collapseTwo" data-bs-toggle="tab">Link #2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#flush-collapseThree" data-bs-toggle="tab">Link #3</a>
        </li>
      </ul>

      <div class="accordion accordion-flush" id="accordionFlushExample">
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
              Link #1
            </button>
          </h2>
          <div id="flush-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">content 1</div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
              Link #2
            </button>
          </h2>
          <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">content 2</div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
              Link #3
            </button>
          </h2>
          <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">content 3</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
  </body>
</html>

Solution

I solved the first part of your problem. Now you will not see different content when switching from mobile to desktop. For this I had to add 3 additional classes (nl-1, nl-2, nl-3):

<li class="nav-item">
    <a class="nav-link nl-1 active" aria-current="page" href="#flush-collapseOne" data-bs-toggle="tab">Link #1</a>
</li>

<button onclick="document.querySelector('.nl-1').click()" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
    Link #1
</button>

On accordion button click, I triggered the corresponding nav-link click to show the correct content.

But I couldn't figure out a solution for the 2nd issue you are having.

.container .nav-tabs {
  display: none;
}

/* MEDIA QUERY */
@media screen and (min-width: 600px) {
  .container .nav-tabs {
      display: flex;
  }
  .accordion-item h2{
      display: none;
  }
  .container .accordion-item {
      border: none;
  }
}

 <!-- Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">


<div class="container">
      <ul class="nav nav-tabs">
        <li class="nav-item">
          <a class="nav-link nl-1 active" aria-current="page" href="#flush-collapseOne" data-bs-toggle="tab">Link #1</a>
        </li>
        <li class="nav-item">
          <a class="nav-link nl-2" href="#flush-collapseTwo" data-bs-toggle="tab">Link #2</a>
        </li>
        <li class="nav-item">
          <a class="nav-link nl-3" href="#flush-collapseThree" data-bs-toggle="tab">Link #3</a>
        </li>
      </ul>

      <div class="accordion accordion-flush" id="accordionFlushExample">
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button onclick="document.querySelector('.nl-1').click()" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseOne" aria-expanded="false" aria-controls="flush-collapseOne">
              Link #1
            </button>
          </h2>
          <div id="flush-collapseOne" class="accordion-collapse collapse show" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">content 1</div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button onclick="document.querySelector('.nl-2').click()" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseTwo" aria-expanded="false" aria-controls="flush-collapseTwo">
              Link #2
            </button>
          </h2>
          <div id="flush-collapseTwo" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">content 2</div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button onclick="document.querySelector('.nl-3').click()" class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#flush-collapseThree" aria-expanded="false" aria-controls="flush-collapseThree">
              Link #3
            </button>
          </h2>
          <div id="flush-collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionFlushExample">
            <div class="accordion-body">content 3</div>
          </div>
        </div>
      </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>