how can I make every collapse button work separately?-CodePudding

I'm trying to design a blog with 3 cards in a card group then I add collapse buttons to the bottom of every card and the problem is when I press any button they are all pressed together and show the first collapse button's text even though I added bootstrap css link and the javascript two links, I'm using bootstrap and here is my code's body , any suggestions ?

<body>
<div >
  <div >
    <div >
      <img src="https://assets.codepen.io/6093409/mountains-1.jpg" alt="a snow-capped mountain range"/>
      <div >
        <h2 >Mountains</h2>
        <p >This is a photo of snowy-covered mountains. How majestic.</p>
        <p>
          <a  data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
            Link with href
          </a>
          <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
            Button with data-bs-target
          </button>
        </p>
        <div  id="collapseExample">
          <div >
            Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
          </div>
        </div>
      </div>
    </div>

    <div >
      <img src="https://assets.codepen.io/6093409/mountains-4.jpg" alt="a snowy mountain with clouds behind it"/>
      <div >
        <h2 >Mountains</h2>
        <p >This is a photo of snowy-covered mountains. How majestic.</p>
        <p>
  <a  data-bs-toggle="collapse" href="#collapseExample" role="button" aria-expanded="false" aria-controls="collapseExample">
    Link with href
  </a>
  <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
    Button with data-bs-target
  </button>
</p>
<div  id="collapseExample">
  <div >
    Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
  </div>
</div>
      </div>
    </div>

    <div >
      <img src="https://assets.codepen.io/6093409/mountains-3.jpg" alt="a mountain range under a thin layer of clouds"/>
      <div >
        <h2 >Mountains</h2>
        <p >This is a photo of snowy-covered mountains. How majestic.</p>
        <a href="#" >Learn more</a>
      </div>
    </div>
   </div>



    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

  </body>

CodePudding user response：

you are using the same id selector for both, that is why a click on one button will affect the other, to fix the problem, use a separate #id selector, see below for a solution:

<body>
<div >
  <div >
    <div >
      <img src="https://assets.codepen.io/6093409/mountains-1.jpg" alt="a snow-capped mountain range"/>
      <div >
        <h2 >Mountains</h2>
        <p >
            This is a photo of snowy-covered mountains. How majestic.
        </p>
        <p>
          <a  data-bs-toggle="collapse" href="#collapseExample1" role="button" aria-expanded="false" aria-controls="collapseExample">
            Link with href
          </a>
          <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample1" aria-expanded="false" aria-controls="collapseExample">
            Button with data-bs-target
          </button>
        </p>
        <div  id="collapseExample1">
          <div >
            Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
          </div>
        </div>
      </div>
    </div>

    <div >
      <img src="https://assets.codepen.io/6093409/mountains-4.jpg" alt="a snowy mountain with clouds behind it"/>
      <div >
        <h2 >Mountains</h2>
        <p >This is a photo of snowy-covered mountains. How majestic.</p>
        <p>
            <a  data-bs-toggle="collapse" href="#collapseExample2" role="button" aria-expanded="false" aria-controls="collapseExample">
                Link with href
            </a>
            <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseExample2" aria-expanded="false" aria-controls="collapseExample">
                Button with data-bs-target
            </button>
        </p>
        <div  id="collapseExample2">
            <div >
                Some placeholder content for the collapse component. This panel is hidden by default but revealed when the user activates the relevant trigger.
            </div>
        </div>
      </div>
    </div>

    <div >
      <img src="https://assets.codepen.io/6093409/mountains-3.jpg" alt="a mountain range under a thin layer of clouds"/>
      <div >
        <h2 >Mountains</h2>
        <p >This is a photo of snowy-covered mountains. How majestic.</p>
        <a href="#" >Learn more</a>
      </div>
    </div>
   </div>



    <!-- JavaScript Bundle with Popper -->
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/[email protected]/dist/umd/popper.min.js" integrity="sha384-7 zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG 2QOK9T ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

  </body>