I’m using a script tag to add functionality to an FAQ accordion that I’ve made, and I need the accordion to expand on click. Anytime I try nothing happens, whats the problem? And yes, I would like to keep using the internal script tag instead of just creating a separate JS file.

This is the code: https://codesandbox.io/s/zealous-forest-4rgziy?file=/index.html

const toggle1 = document.getElementById("accordion-button-2");

toggle1.addEventListener("click", function() {
  toggle1.ariaExpanded = "true";
});
.container {
  margin: 0 auto;
  padding: 0px 4rem 50px 4rem;
  width: 48rem;
}

.accordion {
  font-family: "Darker Grotesque", sans-serif;
}

.accordion .accordionItem {
  border-bottom: 1px solid #e5e5e5;
  font-family: "Darker Grotesque", sans-serif;
}

.accordion .accordionItem button[aria-expanded="true"] {
  border-bottom: 1px solid #fdd133;
}

.accordion button {
  position: relative;
  display: block;
  text-align: left;
  width: 100%;
  padding: 1em 0;
  color: #7288a2;
  font-size: 1.15rem;
  font-weight: 400;
  border: none;
  background: none;
  outline: none;
}

.accordion button:hover,
.accordion button:focus {
  cursor: pointer;
  color: #faf069;
}

.accordion button:hover::after,
.accordion button:focus::after {
  cursor: pointer;
  color: #faf069;
  border: 1px solid #faf069;
}

.accordion button .accordionTitle {
  padding: 1em 1.5em 1em 0;
  font-family: "Darker Grotesque", sans-serif;
  font-weight: 700;
  color: black;
  font-size: 34px;
}

.accordion button .icon {
  display: inline-block;
  position: absolute;
  top: 18px;
  right: 0;
  width: 22px;
  height: 22px;
  border: 1px solid;
  border-radius: 22px;
}

.accordion button .icon::before {
  display: block;
  position: absolute;
  content: "";
  top: 9px;
  left: 5px;
  width: 10px;
  height: 2px;
  background: currentColor;
}

.accordion button .icon::after {
  display: block;
  position: absolute;
  content: "";
  top: 5px;
  left: 9px;
  width: 2px;
  height: 10px;
  background: currentColor;
}

.accordion button[aria-expanded="true"] {
  color: #fdd133;
}

.accordion button[aria-expanded="true"] .icon::after {
  width: 0;
}

.accordion button[aria-expanded="true"]+.accordionContent {
  opacity: 1;
  max-height: 9em;
  transition: all 200ms linear;
  will-change: opacity, max-height;
}

.accordion .accordionContent {
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  transition: opacity 200ms linear, max-height 200ms linear;
  will-change: opacity, max-height;
}

.accordion .accordionContent p {
  font-size: 1rem;
  font-weight: 300;
  margin: 2em 0;
}
<body>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Darker+Grotesque:wght@300;400;500;600;700;800&display=swap" rel="stylesheet" />



  <div class="container">
    <div class="accordion">
      <div class="accordionItem">
        <button id="accordion-button-1" aria-expanded="false">
            <span class="accordionTitle" id="at">
              Question 1
            </span>
            <span class="icon" aria-hidden="true"></span>
          </button>

        <div class="accordionContent">
          <p>Lorem ipsum</p>
        </div>
      </div>

      <div class="accordionItem">
        <button id="accordion-button-2" aria-expanded="true">
            <span class="accordionTitle">
              Question 2
            </span>
            <span class="icon" aria-hidden="true"></span>
          </button>

        <div class="accordionContent">
          <p>Lorem ipsum</p>
        </div>
      </div>
    </div>
  </div>

I would suggest two improvements:

  1. Move your script tag to the end of the body tag. That way it runs once the document loads. Otherwise, you can’t get a reference to the node to add the event listener.
  2. Use setAttribute to change the aria-expanded attribute.

BONUS: I’ve implemented a version where the button toggles the aria-expanded attribute.

const toggle1 = document.getElementById("accordion-button-2");

toggle1.addEventListener("click", function () {
    let isExpanded = toggle1.getAttribute("aria-expanded") === "true";
    toggle1.setAttribute("aria-expanded", !isExpanded);
});