<button id="toggle">
  <span class="visually-hidden">
    Dynamic Island Toggle
  </span>
</button>
<div class="expander" id="expander">
  <div class="expander-content" id="content">
    This is dynamic content.
  </div>
</div>

.expander {
  display: grid;
  grid-template-rows: 0fr;
  overflow: hidden;
  transition: grid-template-rows 1s;
  background: black;
  color: white;
  width: 100px;
  border-radius: 10px;
  position: absolute;
  left: 50%;
  top: 10px;
  translate: -50% 0;
  transition: 1s;
  transform-origin: top center;
}
.expander-content {
  min-height: 0;
  transition: 1s;
  opacity: 0;
  padding: 10px;
  font: 0.5rem/1.3 system-ui;
}
.expander.expanded {
  grid-template-rows: 1fr;
  scale: 1.8;
}
.expander.expanded .expander-content {
  // visibility: visible;
  opacity: 1;
}

#toggle {
  width: 100px;
  background: black;
  height: 25px;
  border-radius: 10px;
  border: 0;
  position: absolute;
  left: 50%;
  top: 10px;
  translate: -50% 0;
  z-index: 1;
  opacity: 0;
}
.visually-hidden {
  position: absolute;
  top: -9999px;
  left: -9999px;
}

/*
  All this JavaScript does is flop out content to text out different amounts and toggle the expanded class. No animtion or measurement is done here.
*/

import { LoremIpsum } from "https://cdn.skypack.dev/lorem-ipsum@2.0.8";

const lorem = new LoremIpsum({
  sentencesPerParagraph: {
    max: 8,
    min: 4
  },
  wordsPerSentence: {
    max: 16,
    min: 4
  }
});

let i = 0;

document.documentElement.onclick = () => {
  expander.classList.toggle("expanded");
  toggle.classList.toggle("expanded");
  if (i % 2 == 0) {
    content.innerHTML = lorem.generateWords(randomInt(3, 20));
  }
  i++;
};

function randomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);
}