どーも！りゅうです(｢･ω･)｢
プラグインは重くなるのでできるだけ入れたくない。
でもHTMLなどに詳しくない。。
という方向けに、以下のようなアコーディオンメニューをコピペだけで作る方法をご紹介します！
▼ タイトル
展開された文章が表示されます！
改行文章もOK。
影付きや角丸など自由に設定できます！
Attention
WordPressの設定や環境にもよりますので、コピペ後に適宜調整くださいませ
Point
HTML、CSS、JavaScriptを使用します
コピペで実装するアコーディオンメニュー
HTML
コード
要素の解説
・.accordion：アコーディオンメニュー全体を囲むコンテナです。
・.accordion-title：アコーディオンのタイトル部分を表します。クリックすることで、関連するコンテンツの表示/非表示を切り替えます。
・.accordion-content：アコーディオンの内容部分を表します。初期状態では非表示になっています。
・.accordion-content-inner：アコーディオンの内容の内側のラッパーです。パディングや不透明度の調整に使用します。
CSS
コード
要素の解説
.accordion:
・border-radius: 5px;: アコーディオンメニューの角を5pxの半径で丸くします。これにより、メニューの外観が柔らかくなります。
・overflow: hidden;: アコーディオンメニューの内容がメニューの境界を越えて表示される場合、それを隠すように設定します。これにより、メニューの外観が整います。
・box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);: アコーディオンメニューに影を適用します。影のオフセットは上下に0px、左右に2px、ぼかしは5px、色は黒（rgba(0, 0, 0, 0.2)）で透明度20%に設定されています。これにより、メニューに立体感が加わります。
.accordion-title:
・background-color: #676e78;: タイトル部分の背景色を#676e78（濃いグレー）に設定します。
・padding: 5px 10px;: タイトル部分の上下に5px、左右に10pxのパディングを設定します。これにより、タイトルの内容とメニューの境界線の間に適度な余白が確保されます。
・cursor: pointer;: マウスカーソルがタイトル部分の上に来たときに、ポインターの形状に変化するように設定します。これにより、ユーザーはタイトルがクリック可能であることを視覚的に認識できます。
・color: white;: タイトルのテキストの色を白に設定します。背景色が濃いグレーであるため、白のテキストは読みやすくなります。
・user-select: none;: ユーザーがタイトルの文字列を選択できないようにします。これにより、タイトルをクリックしたときに、文字列が選択されることを防ぎます。
.accordion-content:
・background-color: #e8e8e8;: コンテンツ部分の背景色を#e8e8e8（明るいグレー）に設定します。
・color: #314f5a;: コンテンツのテキストの色を#314f5a（濃い青みがかったグレー）に設定します。
・overflow: hidden;: コンテンツがアコーディオンメニューの境界を越えて表示される場合、それを隠すように設定します。
・max-height: 0;: アコーディオンが閉じている状態での高さを0に設定します。これにより、コンテンツが非表示になります。
・transition: max-height 0.3s ease-out, padding 0.3s ease-out;: アコーディオンの開閉アニメーションを設定します。max-heightとpaddingのプロパティが0.3秒かけて変化し、ease-out（開始時は速く、終了時は緩やかな変化）のタイミング関数が適用されます。
・padding: 0 10px;： コンテンツの左右に10pxのパディングを設定します。これにより、コンテンツとメニューの境界線の間に適度な余白が確保されます。
.accordion-content.open:
・max-height: 1000px;: アコーディオンが開いている状態での高さの最大値を1000pxに設定します。これにより、コンテンツが表示されます。実際のコンテンツの高さが1000pxを超える場合、スクロールバーが表示されます。
・padding: 10px;: アコーディオンが開いている状態での上下左右に10pxのパディングを設定します。
・transition: max-height 0.5s ease-in, padding 0.5s ease-in;: アコーディオンの開閉アニメーションを設定します。max-heightとpaddingのプロパティが0.5秒かけて変化し、ease-in（開始時は緩やかで、終了時は速い変化）のタイミング関数が適用されます。
Javascript
コード
要素の解説
・getElementsByClassNameを使用して、すべての.accordion要素を取得します。
・各アコーディオン要素に対してクリックイベントリスナーを追加します。
・クリックされたアコーディオン要素に.activeクラスをトグルします。
・クリックされたアコーディオン要素内の.accordion-content要素を取得します。
・.accordion-content要素に.openクラスが存在するかどうかを確認します。
存在する場合は、.openクラスを削除して、アコーディオンを閉じます。
存在しない場合は、.openクラスを追加して、アコーディオンを開きます。
あとがき
アコーディオンメニューは実装できましたでしょうか？
プラグインのAddQuicktagに登録すると記事の執筆も楽になります！
AddQuicktagの紹介は別記事で紹介しようと思います。
ではまた別の記事でお会いしましょう！
