Исправление выпадающей страницы

Question

Я создал выпадающую страницу, используя вопрос, заданный ранее. ( Создание выпадающей страницы ) Я сделал это, но текст, который должен появиться ПОСЛЕ нажатия кнопки, остается до ее нажатия. Кто-нибудь видит проблемы в коде?

function reveal1() {
  document.getElementById('h').className = 'open';
}

function reveal2() {
  document.getElementById('i').className = 'open';
}

div {
  height: 50px;
  background-color: blue;
}

#h {
  height: 0;
  transition: height 0.2s linear;
  background: blue;
}

#h.open {
  height: 50px
}

#i {
  height: 0;
  transition: height 0.2s linear;
  background: blue;
}

#i.open {
  height: 50px
}

<div>
  <button onclick="reveal1()">test</button>
</div>
<div id="h">why are we here</div>
<div>
  <button onclick="reveal2()">test</button>
</div>
<div id="i">why are we here</div>

Answer 1

Проблема в том, что вы пытаетесь сначала скрыть текст, установив высоту на ноль, но он все равно будет отображаться в переполнении. Просто добавьте этот стиль в #i и #h:

#i, #h {
    overflow: hidden;
}