【デザイン】「アコーディオン」「折りたたみ」の基本の基本。。(´・ω・｀)

こんにちは、ハクです。

私は長くありませんが、記事を書いて、質問に答えるためには「隠す」方法が必要と思いました。

そこで「隠す」機能を調べました。

ですが「隠す」ではなく「折りたたみ」「アコーディオン」なメニューと知りました。
どうもプログラミングのソースコードで知識は必要と感じましたが、まず基本の基本だと思います。

これは「HTML」です。

<details id=pattern1> 
  <summary>クリックして詳細をチェック</summary>
    <li>情報1</li>
    <li>情報2</li>
    <li>情報3</li>
</details>

これは「CSS」です。

#pattern1 {
background-color:#7fffd4;
width:300px;
}

例です。ご覧ください。

クリックして詳細をチェック

情報1

情報2

情報3

他のタグでいくつか種類がありましたが、なぜか動かず、これしか使えません。
もっと試しながら学びます。ではまた。

(´・ω・｀)