bootstrap accordion expand only when clicked on arrow-CodePudding

I am using Bootstrap 5 to style my website and I am wondering if there is any way that I can expand accordion only when is clicked on the arrow that is on the right side. The default behavior is that the whole button is expandable and I want to simply change it.

Below is the code from the documentation just for reference:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.0.2/css/bootstrap.min.css">

<div  id="accordionExample">
  <div >
    <h2  id="headingOne">
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
        Accordion Item #1
      </button>
    </h2>
    <div id="collapseOne"  aria-labelledby="headingOne" data-bs-parent="#accordionExample">
      <div >
        <strong>This is the first item's accordion body.</strong> It is shown by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
  <div >
    <h2  id="headingTwo">
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo">
        Accordion Item #2
      </button>
    </h2>
    <div id="collapseTwo"  aria-labelledby="headingTwo" data-bs-parent="#accordionExample">
      <div >
        <strong>This is the second item's accordion body.</strong> It is hidden by default, until the collapse plugin adds the appropriate classes that we use to style each element. These classes control the overall appearance, as well as the showing and hiding via CSS transitions. You can modify any of this with custom CSS or overriding our default variables. It's also worth noting that just about any HTML can go within the <code>.accordion-body</code>, though the transition does limit overflow.
      </div>
    </div>
  </div>
</div>

<script type = "text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>

CodePudding user response：

.accordion-button {
    pointer-events: none;
}

.accordion-button::after {
    pointer-events: all;
}

add this code to your css.