display:noneを置き換える

自己紹介ページの最後の過程で、私の学歴と経験を増やしました.
しかし、私はこれらの個人情報を公開するのが少し耻ずかしいです(...)ボタンを押して広げたいです.
あれからの苦しみ
まず私の自己紹介ページを完成します:https://jujusnake.github.io/introduction/
1.ボタンをクリック->クラス名スクリプトの追加

    <script>
      function showContent(content, button) {
        let element = document.getElementById(content);
        element.classList.toggle("show");

        let element2 = document.getElementById(button);
        element2.classList.toggle("active-button");
      }
    </script>

showContentという関数を作成して、2つのパラメータを受信します.

content:

ボタン:

を実行するには、どのボタンを押す必要がありますか?
内容もshow|buttonは次のとおりです.active-buttonというクラスが追加されました.
ここまでは直感的で簡単です.関数として学歴も経歴も使えるので良いです.
2.問題はCSS...

.bio button {
  font-size: 20px;
  font-weight: 700;
}

#study-content,
#work-content {
  display: none;
  font-size: 16px;
  line-height: 1.5em;
}

display:none;あげました.

.active-button {
  text-decoration: underline;
  margin-bottom: 28px;
}

.show {
  display: block;
}

ボタンを押すと、上の2つのクラスが追加されます.
ボタンには下線があり、下には余白値があります.
コンテンツ領域の表示がブロックに変更されます.
でもdisplay:noneは移行を食べません!!
開けるよりも20秒で開けて閉めたいので、別の方法を探すしかありません...
1) visibility
displayの代わりにvisibilityを使うことができますが、問題は移行も食べないことです.だから人々は不透明さも一緒に使って、人に交流を与えます.

#study-content,
#work-content {
  visibility: hidden;
  opacity: 0;
  font-size: 16px;
  line-height: 1.5em;
  transition: opacity 300ms ease-in-out;
}

.show {
  visibility: visible;
  opacity: 1;
}

(変換の動作原理によれば、連続数字で値を与えることができる属性にのみ機能します.つまり、hidd->visibleではなく非連続属性であるため、可視性は不可能です.不透明性は0から1までの連続値を持つ属性です.)
しかし、私は不透明なものがほしいわけではありません.
上からガタガタ~と広げたいだけです.
また、visibilityを使うと空白になるので、レイアウトが混乱するのは嫌です.
2) height
だから私はheight 0からautoで軽く展開すればいいのではないでしょうか.と思います.overflow: hidden;もしあなたがそれを私にくれたら、それが閉じたとき、それは空白の領域を捕まえることができなくて、それも見えません.

#study-content,
#work-content {
  height: 0px;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.5em;
  transition: auto 300ms ease-in-out;
}

.show {
  height: auto;
}

でも….今回hight:autoの特許にはなりませんㅠㅠ
ここまで取引する必要はありますか?という考えが生まれた.
でも別の方法で...height値を数値に指定すると問題が解決しますが、後でコンテンツを追加するときに面倒になります.autoを使い続ける方法がほしいです.
3) max-height
検索を続けると,heightに干渉を及ぼさずにmax−heightを用いる方法があることが分かった.

#study-content,
#work-content {
  max-height: 0px;
  overflow: hidden;
  font-size: 16px;
  line-height: 1.5em;
  transition: max-height 300ms ease-in-out;
}

.show {
  max-height: 200px !important;
}

オフ時の最大高さ:0 px;与える.さて、エリアはもちろん0 pxで、見えなくなりました.
開くときに十分なmax-height値をください(ランダムに200 pxをあげますが、直接100 vhなどをくれると思います).
これでheightはdepart値としてautoなので、展開しても実際に占有しているエリアはちょうどcontentの内容と同じです.
でもmax-heightに0から200 pxの変化を与えたので、薄く咲きます!
トラブルシューティング!
その後、ボタンの余白-下部にも変換します.

.bio button {
  font-size: 20px;
  font-weight: 700;
  transition: margin-bottom 300ms ease-in-out;
}

あげないと、出たり消えたりしたときに、硬くなります.
正直簡単に挑戦できると思っていたのですが….本当に長い間捕まえた.
しかし、幸いなことに結果は満足している.
もしここに何か考えなければならないことがあったら.
アクセス性の観点から、display、visibility、heightなどのプロパティを使用する場合、スクリーンリーダーはどのように反応しているかを見る必要があります.
では、最初のエンベロープ位置決めは終了します.