アコーディオンメニュー（折り畳みメニュー）を作成するための基本的なHTMLとCSSのコード例を以下に示します。
<!DOCTYPE html>
<html>
<head>
<title>アコーディオンメニュー</title>
<style>
/* アコーディオンメニューのスタイル */
.accordion {
background-color: #f5f5f5;
border: none;
color: #000;
cursor: pointer;
padding: 10px 20px;
width: 100%;
text-align: left;
outline: none;
font-size: 18px;
transition: 0.4s;
}
.panel {
padding: 0 20px;
background-color: white;
display: none;
overflow: hidden;
}
</style>
</head>
<body>
<!-- アコーディオンメニューの要素 -->
<button class="accordion">セクション1</button>
<div class="panel">
<p>セクション1の内容をここに入力します。</p>
</div>
<button class="accordion">セクション2</button>
<div class="panel">
<p>セクション2の内容をここに入力します。</p>
</div>
<button class="accordion">セクション3</button>
<div class="panel">
<p>セクション3の内容をここに入力します。</p>
</div>
<!-- スクリプト -->
<script>
// アコーディオンメニューのクリックイベントの処理
var acc = document.getElementsByClassName("accordion");
var i;
for (i = 0; i < acc.length; i++) {
acc[i].addEventListener("click", function() {
this.classList.toggle("active");
var panel = this.nextElementSibling;
if (panel.style.display === "block") {
panel.style.display = "none";
} else {
panel.style.display = "block";
}
});
}
</script>
</body>
</html>上記のコードでは、アコーディオンメニューを作成するために、<button>と<div>要素を使用しています。各セクションのボタンは<button>タグで作成され、各セクションの内容は<div>タグで作成されます。
CSSスタイルは<style>タグ内に記述され、アコーディオンメニューの見た目を制御します。クラス名.accordionはボタン要素のスタイルを、.panelはコンテンツ要素のスタイルを定義しています。
JavaScriptの部分では、各ボタン要素にクリックイベントが追加され、ボタンをクリックすると関連するコンテンツが表示されたり非表示になったりします。クリックイベントの処理
では、クリックされたボタン要素に.activeクラスを追加することで、ボタンのスタイルを変更しています。
これらのコードをHTMLファイルに保存し、ウェブブラウザで開くと、アコーディオンメニューが表示されます。各セクションの内容は初めは非表示になっており、ボタンをクリックするとコンテンツが展開されます。
この基本的なコード例を参考にして、アコーディオンメニューを作成するためのカスタマイズや追加の要素を実装することができます。
