title: Div. Toggle with button click
body: <p>I am working on a form and want different divs to show when different button is click but can't make it work I used data-toggle with bootstrap but it is showing both the div together</p>
  <p>This first image is what happens when I click billed monthly</p>
  <p><img src="https://i.stack.imgur.com/ziFOM.png" alt="" /></p>
  <p>In the second image when I click billed yearly the first div is also showing but I want that only second div is visible</p>
  <p>when you click on billed monthly first and then on billed yearly next both the divs are visible and i only want that one shoul be visible like if you first click billed monthly the div related to it should show and if you click billed yearly next the billed monthly div should hide and only bileed yearly div should be visible.</p>
  <p><img src="https://i.stack.imgur.com/KWwQs.png" alt="" /></p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous"&gt;
  
  &lt;div class="row justify-content-evenly"&gt;
  
    &lt;div class="col d-grid gap-2 col-3 mt-4 mb-3"&gt;
      &lt;button type="button" class="btn btn-outline-primary" id="billed-monthly" value="monthly" style="border: solid 1px grey;" data-bs-toggle="collapse" data-bs-target="#billmonthly" aria-expanded="false" aria-controls="collapseExample"&gt;Billed Monthly&lt;/button&gt;
  
    &lt;/div&gt;
    &lt;div class="col d-grid gap-2 col-3 mt-4 mb-3"&gt;
      &lt;button type="button" class="btn btn-outline-primary" id="billed-yearly" value="yearly" style="border: solid 1px grey;" data-bs-toggle="collapse" data-bs-target="#billyearly" aria-expanded="false" aria-controls="collapseExample"&gt;Billed Yearly&lt;/button&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div class="row mt-2 collapse" id="billmonthly"&gt;
    &lt;div class=" col d-flex justify-content-end"&gt;
      &lt;h3&gt;Billed now: 199&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row mt-2 collapse" id="billmonthly"&gt;
    &lt;div class=" col d-flex justify-content-end"&gt;
      &lt;p&gt;By clicking "Start Premium Plan", you agree to be charge 199 every&lt;br&gt; month, unless you cancel. You acknowledge that refunds won't be&lt;br&gt; available on cancellation.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row mt-2 collapse" id="billyearly"&gt;
    &lt;div class=" col d-flex justify-content-end"&gt;
      &lt;h3&gt;Billed now: 2030&lt;/h3&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div class="row mt-2 collapse" id="billyearly"&gt;
    &lt;div class=" col d-flex justify-content-end"&gt;
      &lt;p&gt;By clicking "Start Premium Plan", you agree to be charge 2030 every&lt;br&gt; year, unless you cancel. You acknowledge that refunds won't be&lt;br&gt; available on cancellation.&lt;/p&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"&gt;&lt;/script&gt;</code></pre>
  </div>
  </div>
  </p>