賢威のＱ＆Ａのアコーディオンを開いた状態で表示する

賢威には、次のような「アコーディオン式のＱ＆Ａ」が用意されています。

ここには質問文が入ります。

ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。

ここには質問文が入ります。

ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。

ただ、デフォルトでは、アコーディオンが閉じたままで表示されます。

にゃのらいと

一番上に表示される質問は、開いた状態にしたいにゃ

そんな悩みを解決するJavaScriptです。

なお、この記事を作成している時点での、ワードプレスのテーマと環境は以下の通りです。

アコーディオンを開いた状態にするJavaScript

賢威のＱ＆Ａのアコーディオンを開いた状態で表示させるJavaScriptです。

<script>
document.addEventListener('DOMContentLoaded', function() {
var nyaElements = document.querySelectorAll('.opened');
for (var i = 0; i < nyaElements.length; i++) {
nyaElements[i].style.display = 'block';
}
});
</script>

他のプラグイン等と、名前の競合を避けるために、接頭辞（プレフィックス）に、nyaを使用しています。

①投稿（固定）ページに、JavaScriptを記載する

Ｑ＆Ａの投稿（固定）ページの下方に、先程、紹介したJavaScriptを記載します。

<script>タグがないと動作しないので、必ず忘れないようにしてください。

なお、CSSを記載するときも、<style>タグが必要です。

②HTMLにクラスopenedを記載する

開いて表示したいＱ＆Ａの箇所に、クラスopenedを記載します。

例として、１番目の質問と２番目の質問を開いた状態にするHTMLです。

<dl class="qa-list accordion-list">
<dt class="accordion-list_btn">１番目の質問文（開いて表示させるよ）</dt>
<dd class="accordion-list_cont opened">ここには回答文が入りますここには回答文が入りますここには回答文が入ります。<br>
ここには回答文が入ります。<br>
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd>
<dt class="accordion-list_btn">２番目の質問文（開いて表示させるよ）</dt>
<dd class="accordion-list_cont opened">ここには回答文が入りますここには回答文が入りますここには回答文が入ります。<br>
ここには回答文が入ります。<br>
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd>
<dt class="accordion-list_btn">３番目の質問文（閉じたままだよ）</dt>
<dd class="accordion-list_cont">ここには回答文が入りますここには回答文が入りますここには回答文が入ります。<br>
ここには回答文が入ります。<br>
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。</dd>
</dl>

<dd>タグの箇所に、クラスopenedを追加しています。

③動作確認

②のコードを実際に記載すると、次のように表示されます。

１番目の質問文（開いて表示させるよ）

ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。

２番目の質問文（開いて表示させるよ）

ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。

３番目の質問文（閉じたままだよ）

ここには回答文が入りますここには回答文が入りますここには回答文が入ります。
ここには回答文が入ります。
ここには回答文が入りますここには回答文が入りますここには回答文が入りますここには回答文が入ります。

<dd>タグの箇所に、クラスopenedを付けるだけなので、１個おきにＱ＆Ａを開いた状態にすることも可能です。

「Ｑ」と「Ａ」を非表示にして、通常のアコーディオンを作成したい場合は、次の記事を参考にしてみてください。

また、このリンクカードは、CSSで影を付けています。

そのCSSについて記載した記事はこちら。

楽天市場の検索結果

1冊ですべて身につくWordPress入門講座 [ Mana ]

2,200円(税込)【送料込】

楽天ブックス

Mana SBクリエイティブイチサツデスベテミニツクワードプレスニュウモンコウザ マナ 発行年月：2022年03月24日 予約締切日：2022年01月26日 ページ数：344p サイズ：単行本 ISBN：9784815609405 Mana（MANA） 日本で2年間グラフィックデザイナーとして働いた後、カナダ・バンクーバーにあるWeb制作

今すぐ使えるかんたん　WordPress　やさしい入門［6.x対応版］ [ 桑名

1,760円(税込)【送料込】

楽天ブックス

桑名 由美 はつみ 技術評論社イマスグツカエルカンタンワードプレスヤサシイニュウモンロクテンエックスタイオウバン クワナ ユミ ハツミ 発行年月：2023年09月28日 予約締切日：2023年06月02日 ページ数：256p サイズ：単行本 ISBN：9784297136253 桑名由美（クワナユミ） 2023年8月、合同会社ワイズベスト

HTMLサイトをWordPressにする本 [ 久保田 涼子 ]

2,640円(税込)【送料込】

楽天ブックス

久保田 涼子 西原 礼奈 ソシムエイチティーエムエルサイトヲワードプレスニスルホン クボタ リョウコ ニシハラ アヤナ 発行年月：2023年08月29日 予約締切日：2023年06月06日 ページ数：360p サイズ：単行本 ISBN：9784802614214 久保田涼子（クボタリョウコ） 「ワクワクするモノ・時間・場所を生み出す」をテ

たった1日で基本が身に付く！　WordPress 超入門 ［改訂2版］ [ 佐々

1,980円(税込)【送料込】

楽天ブックス

佐々木 恵 リブロワークス 技術評論社タッタイチニチデキホンガミニツクワードプレスチョウニュウモンカイテイニハン ササキ メグミ リブロワークス 発行年月：2022年04月14日 予約締切日：2022年01月05日 ページ数：192p サイズ：単行本 ISBN：9784297126957 佐々木恵（ササキメグミ） 2002年より独学でWe

ゼロから学ぶ はじめてのWordPress [ 泰道ゆりか ]

1,980円(税込)【送料込】

楽天ブックス

泰道ゆりか SBクリエイティブゼロカラマナブハジメテノワードプレス タイドウユリカ 発行年月：2022年10月12日 予約締切日：2022年07月22日 ページ数：352p サイズ：単行本 ISBN：9784815615222 泰道ゆりか（タイドウユリカ） Webデザイナー／株式会社CORELILY代表取締役。立教大学卒業後、銀行に就職。