簡易版アコーディオンメニュー

まずはdetailsタグを使ってアコーディオンUIをマークアップしていく方法を見ていきます。

・JavaScriptを使ってアコーディオンメニューを作っていくという話をしてきましたが実は簡易的にHTMLだけでアコーディオンのようなulを実装することが可能です。

: アコーディオンメニューを作る

アコーディオンメニューのファイルを作っていきます。アコーディオンメニューとは？ index.htmlの作成アコーディオンメニューとは？・まずは全体のイメージから掴んでいきたいと思います。・アコ ...

・アコーディオンメニューとはQ&Aなどで質問があってその質問をクリックすることで回答を表示させることができるUIです。

・今回は簡易版のアコーディオンメニューを作っていく方法を紹介していきます。

・まず回答の部分から作っていきます。detailsタグを使うことによってタグの中にある文字を隠しておいて詳細をクリックすることでその中身を見ることができます。

・例えば<details>こんにちは</details>と書くとブラウザには詳細という文字が出てきてその詳細をクリックすることによってこんにちはという文字が出てくるという仕組みです。

・これを利用して回答部分をまず書いていきます。今回は分かりやすいように回答と書いておきます。

・次に質問部分を作っていきます。

・detailsタグの中の回答の前にsummaryタグを入れることでその中に書いた内容が詳細に置き換えることができます。

・つまりsummaryタグの中に質問を書いていくことでその質問をクリックすることによって回答が出現します。

・具体的には

回答

</details>

というように書くことによってブラウザで表示されている質問部分をクリックすることで回答が下に出てくるのです。

・最初から項目を展開しておきたい場合もあると思います。

・その場合はdetailsタグにopen属性を付けて上げることによって最初から質問と回答が見られる状態で表示してくれます。

・そうなってくるとアコーディオンメニューではありませんが一応そのような設定もできることを覚えておきましょう。

・こんな感じです。

回答。回答。回答。回答。回答。回答。回答。回答。回答。回答。回答。回答。

</details>

・detailsタグを使う場合欠点が多少あります。

・JavaScriptでの動作が扱いにくいのとCSSでスタイリングがしにくいのでこのまま使う場合はいいのですが色々カスタマイズしていきたい場合はこれから作っていく方法を使うほうがいいと思います。

・一長一短ありますが簡易的に使う分には申し分ないのでタグの使い方は覚えておくようにしましょう。

リンク