Bootstrap 5 buton toggle show/hide content-CodePudding

I have two buttons which will display content when clicked. What I want to do is hide a buttons content when the other button is clicked. For example, clicking button 1 displays the button 1 content. If button 2 is clicked, I would like to first hide the button 1 content before displaying the button 2 content. And vice versa. How can I do this in Bootstrap 5?

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

<p>
  <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapse1" aria-expanded="false" aria-controls="collapseExample">
    Button 1
  </button>
  
  <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapse2" aria-expanded="false" aria-controls="collapseExample">
    Button 2
  </button>
</p>

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

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

CodePudding user response：

It is not possible to use toggle to show some elements and hide others just with attributes. You need to use javascript. One option is to use bootstrap api. See Events. Other way is to use inline event handler for the onclick event to achieve what you need.

See the example below. In this case, the onclick event handler for the first button removes the show class from collapse2 and viceversa.

<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>
</p>
<div  id="collapse1">
  Button 1 content
</div>
<div  id="collapse2">
  Button 2 content
</div>

CodePudding user response：

You're essentially describing tabbed Pills behavior. Why not use that?

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

<div >
  <ul  id="myTab" role="tablist">
    <li  role="presentation">
      <button  id="home-tab" data-bs-toggle="tab" data-bs-target="#one" type="button" role="tab" aria-controls="one" aria-selected="true">Home</button>
    </li>

    <li  role="presentation">
      <button  id="profile-tab" data-bs-toggle="tab" data-bs-target="#two" type="button" role="tab" aria-controls="two" aria-selected="false">Profile</button>
    </li>
  </ul>

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

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

<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>