How can I show and hide content with Bootstrap 5 for more 5 buttons.Without the content gets stacked-CodePudding

I have 5 buttons that display content when I click. I want to be able to hide content when any button is clicked. For example, clicking button 1 displays the button 1 content. If button 5 is clicked, I would first hide the button 1 content before displaying the button 5 content.

This solution only works if there were two buttons.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>
<button  type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapseExample" onclick="(function() { document.getElementById('collapse2').classList.remove('show'); })();">
    Button 1
  </button>
<button  type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapseExample" onclick="(function() { document.getElementById('collapse1').classList.remove('show'); })();">
    Button 2
  </button>
<button  type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapseExample" onclick="(function() { document.getElementById('collapse2').classList.remove('show'); })();">
    Button 3
  </button>
</p>
<div  id="collapse1">
  Button 1 content
</div>
<div  id="collapse2">
  Button 2 content
</div>

<div  id="collapse3">
  Button 3 content
</div>

CodePudding user response：

Not being a professional webdev myself I can empathize with the struggles of making bootstrap do what you'd like

Based on my little experience with it, I think that this might fix your problem

const buttons = document.querySelectorAll('button');

buttons.forEach(button => {
  button.addEventListener('click', () => {
    document.querySelectorAll('.collapse').forEach(collapse => {
      collapse.classList.remove('show');
    })
  })
})

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<button  type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapseExample" onclick="(function() { document.getElementById('collapse2').classList.remove('show'); })();">Button 1</button>

<button  type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapseExample" onclick="(function() { document.getElementById('collapse1').classList.remove('show'); })();">Button 2</button>

<button  type="button" data-bs-toggle="collapse" data-bs-target="#collapse3" aria-expanded="false" aria-controls="collapseExample" onclick="(function() { document.getElementById('collapse2').classList.remove('show'); })();">Button 3</button>

<div  id="collapse1">
  Button 1 content
</div>

<div  id="collapse2">
  Button 2 content
</div>

<div  id="collapse3">
  Button 3 content
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>

CodePudding user response：

Seems like you just want pilled tabs.

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-0evHe/X R7YkIZDRvuzKMRqM OrBnVFBL6DOitfPri4tjfHxaWutUpFmBp4vmVor" crossorigin="anonymous">

<ul  id="pills-tab" role="tablist">
  <li  role="presentation">
    <button  id="pills-home-tab" data-bs-toggle="pill" data-bs-target="#panel-1" type="button" role="tab" aria-controls="panel-1" aria-selected="true">Button 1</button>
  </li>
  <li  role="presentation">
    <button  id="tab-2" data-bs-toggle="pill" data-bs-target="#panel-2" type="button" role="tab" aria-controls="panel-2" aria-selected="false">Button 2</button>
  </li>
  <li  role="presentation">
    <button  id="tab-3" data-bs-toggle="pill" data-bs-target="#panel-3" type="button" role="tab" aria-controls="panel-3" aria-selected="false">Button 3</button>
  </li>
  <li  role="presentation">
    <button  id="tab-4" data-bs-toggle="pill" data-bs-target="#panel-4" type="button" role="tab" aria-controls="panel-4" aria-selected="false">Button 4</button>
  </li>
  <li  role="presentation">
    <button  id="tab-5" data-bs-toggle="pill" data-bs-target="#panel-5" type="button" role="tab" aria-controls="panel-5" aria-selected="false">Button 5</button>
  </li>
</ul>

<div  id="pills-tabContent">
  <div  id="panel-1" role="tabpanel" aria-labelledby="pills-home-tab" tabindex="0">Panel 1</div>
  <div  id="panel-2" role="tabpanel" aria-labelledby="pills-profile-tab" tabindex="0">Panel 2</div>
  <div  id="panel-3" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Panel 3</div>
  <div  id="panel-4" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Panel 4</div>
  <div  id="panel-5" role="tabpanel" aria-labelledby="pills-contact-tab" tabindex="0">Panel 5</div>
</div>

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script>