Using vanilla JS, I'm trying to toggle the visibility of an element and then change the text of the button whilst also changing the aria-expanded.

If you click on the button, then the list should show as-well as the button changing text, and if you click on it again, then the list will be hidden as-well as the button text changing.

Below is the code but can't seem to figure out why it's not working?

  var featureListToggleButton = document.getElementById(
    "FeatureList-toggle-button"
  );
  var featureList = document.getElementById("FeaturesList");

  featureListToggleButton.addEventListener("click", function () {
    featureListToggleButton.getAttribute(
      "aria-expanded",
      function (index, value) {
        var isExpanded = value === "true";
        featureList.classList.toggle("hide");
        featureListToggleButton.textContent(isExpanded ? "Show" : "Hide");

        return !isExpanded;
      }
    );
  });