Css Transition doesn't work for the content. Its applied to the button but not to the content. The content doesn't hide/show smoothly

Question

The button seems to have the transition but the content doesn'hide/show smoothly.

const button = document.querySelectorAll(".accordian_btn");
const content = document.querySelectorAll(".accordian_content");
button.forEach((item) => {
  item.addEventListener("click", () => {
    item.classList.toggle("change");
  });
});

.accordian {
  margin: 2rem 0;
}

.accordian_btn {
  width: 100%;
  background-color: #fff;
  color: #333;
  padding: 1rem;
  text-transform: capitalize;
  text-align: left;
  position: relative;
  border: 0.1rem solid #ccc;
  border-radius: 3rem;
  outline: none;
  cursor: pointer;
  font-size: 1.3rem;
  letter-spacing: 0.1rem;
  transition: all 0.15s;
}

.accordian_btn::after {
  content: "\25be";
  width: 1rem;
  font-size: 2rem;
  position: absolute;
  top: 0.5rem;
  right: 1rem;
}

.accordian_content {
  display: none;
  overflow: auto;
  transition: all 0.15s;
  font-size: 1.2rem;
}

.change.accordian_btn {
  background-color: #e0f3ff;
  border-radius: 3rem;
}

.change.accordian_btn::after {
  transform: rotate(-90deg);
}

.change.accordian_btn+.accordian_content {
  display: block;
  box-shadow: 0 0.1rem 0.3rem #ccc;
  padding: 1rem;
  border-radius: 1rem;
}

<section class="questions">
  <div class="accordian">
    <button class="accordian_btn">How do I update my Billing Info</button>
    <div class="accordian_content">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident quasi esse possimus quas? Facilis odit ducimus a corporis consectetur eos adipisci dicta aliquid voluptatibus totam.</p>
    </div>
  </div>
  <div class="accordian">
    <button class="accordian_btn">How do I update my Billing Info</button>
    <div class="accordian_content">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident quasi esse possimus quas? Facilis odit ducimus a corporis consectetur eos adipisci dicta aliquid voluptatibus totam.</p>
    </div>
  </div>
  <div class="accordian">
    <button class="accordian_btn">How do I update my Billing Info</button>
    <div class="accordian_content">
      <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident quasi esse possimus quas? Facilis odit ducimus a corporis consectetur eos adipisci dicta aliquid voluptatibus totam. Lorem ipsum dolor, sit amet consectetur adipisicing elit. Provident
        quasi esse possimus quas? Facilis odit ducimus a corporis consectetur eos adipisci dicta aliquid voluptatibus totam.</p>
    </div>
  </div>
</section>

View on CodePen