みなさんこんにちは！おさかなです！
今回は「アコーディオンリストの設置方法」について、書いていこうと思います！
それでは、レッツゴー！！！！！
・WordPress初心者の方
・クリックすると開く、アコーディオンリストを設置したい方
・HTMLを勉強中の方
こんな感じのものを設置します！
▼ クリックまたはタップして答えを見る！
今回はWordPressを使って、アコーディオンリストを設置していくよ！
わーい！(いつもと立場が逆転している…💦)
(えっへん！おさかなも成長したのだ☆)
https://osakanav.com/paid-articles-wordpress-codoc
ソースコードの準備！
<!-- 表示部分 -->
<span onclick="obj=document.getElementById('open').style; obj.display=
(obj.display=='none')?'block':'none';">
<a style="cursor:pointer;">▼ここに表示させたい文章を入力！</a>
</span>
<ul>
<!-- 折り畳まれる部分 -->
<span id="open" style="display: none; clear: both;">
<p>ここに展開後に表示される文章を入力！</p>
</span>
</ul>
今回は「onclick」を使って、クリックした時にid「open」を取得するといった感じのコードを作成しました。
後ほど使うので、テキスト部分を編集して、コピーしておきましょう！(よいしょ！)
https://osakanav.com/wordpress-security-check-url-easy-how-to
WordPressに設置しよう！
それではWordPressに設置する方法を解説していきます！
まずは「ダッシュボード」＞「投稿」＞「新規追加」へ移動します。
ブロックエディタの場合
編集画面が開いたら、「＋」プラスマークをクリックします！(ぽちっと！)
※まだクラシックエディタを使っている方は、ブロックエディタへ移行することをオススメします！
↓詳しくはこちら↓
https://osakanav.com/wordpress-block-editor-switch
検索ボックス内に、「html」と入力して「カスタムHTML」という項目をクリックします！
すると、コードを入力するブロックが表示されると思います！(コンニチワ！)
ブロックの中に、先ほどコピーしておいたコードを貼り付けます！
「プレビュー」に切り替えてみると…？こんな感じで、無事にアコーディオンリストが動作しているのが確認できます。(やった～！)
クラシックエディタの場合
まだブロックエディタへの移行が済んでおらず、クラシックエディタを使用されている方は「テキスト」タブをクリックして、コードを貼り付ければOKです！
↓ちなみに、同じページに「複数のリスト」を設置したい方は、こちらの記事もご参考にしてください！(おー！)
https://osakanav.com/accordion-list-many
これで全ての操作は完了です。(やった～！)
お疲れ様でした☕
ここまで読んでくださり、ありがとうございました！
