前提・実現したいこと
複数のアコーディオンを実装したいです。
発生している問題・エラーメッセージ
アコーディオンにしたいコンテンツがたくさん上から並んでいるのですが、jqueryで実装すると、一番上のものしか開きません。
2個め以降がまったく反応しないのですべて開くようにしたいです。
該当のソースコード
html
1<section class="sms-small"> 2 <h3 id="acMenu">講演会登壇(PR、雑誌ライティングなど)</h3> 3 <div class="ac-open"> 4 <table> 5 <tbody> 6 <tr> 7 <th>■金額</th> 8 <td>20万/時間+税</td> 9 </tr> 10 <tr> 11 <th> ■業務内容</th> 12 <td> 13 ・講演会・イベント登壇 14 ・開催場所等、事前に相談ください 15 ・交通費は別途 16 </td> 17 </tr> 18 </tbody> 19 </table> 20 </div> 21 </section> 22 <section class="sms-small"> 23 <h3 id="acMenu">プレスリリース代行サービス(月3回まで)</h3> 24 <div class="ac-open"> 25 <table> 26 <tbody> 27 <tr> 28 <th>■期間</th> 29 <td>1ヶ月</td> 30 </tr> 31 <tr> 32 <th>■金額</th> 33 <td>10万+税</td> 34 </tr> 35 <tr> 36 <th>■業務内容</th> 37 <td>プレスリリース作成 ※メディアアプローチは含まれません</td> 38 </tr> 39 </tbody> 40 </table> 41 </div> 42 </section> 43 <section class="sms-small"> 44 <h3 id="acMenu">PRのご相談(PRお試しプラン)</h3> 45 <div class="ac-open"> 46 <table> 47 <tbody> 48 <tr> 49 <th>■時間</th> 50 <td>1時間</td> 51 </tr> 52 <tr> 53 <th>■金額</th> 54 <td>1万+税 ※初回無料(60分間)</td> 55 </tr> 56 </tbody> 57 </table> 58 </div> 59 </section> 60 <section class="sms-small"> 61 <h3 id="acMenu">スマホで楽しむ!雑誌風撮影&お茶会</h3> 62 <div class="ac-open"> 63 <table> 64 <tbody> 65 <tr> 66 <th>■時間</th> 67 <td>約3時間</td> 68 </tr> 69 <tr> 70 <th>■金額</th> 71 <td>1万+税</td> 72 </tr> 73 </tbody> 74 </table> 75 <p class="sms-small-text"> 76 ※主に都内の公園やカフェなどで行います。その他出張と組み合わせて、地方開催も 77 行なっておりますので、場所、日時等は要相談。現役雑誌ライターとしての視点で、 78 撮影アドバイスやメディアトレンドをお話しさせていただきます。 79 </p> 80 </div> 81 </section> 82 <section class="sms-small"> 83 <h3 id="acMenu">SNSプロフィール添削</h3> 84 <div class="ac-open"> 85 <table> 86 <tbody> 87 <tr> 88 <th>■時間</th> 89 <td>1案件</td> 90 </tr> 91 <tr> 92 <th>■金額</th> 93 <td>1万+税</td> 94 </tr> 95 <tr> 96 <th>■業務内容</th> 97 <td> 98 TwitterやInstagramなどのプロフィール部分のアドバイスを行います。 99 メディア視点で、どのようなプロフィールが重要視されるのか添削させて 100 いただきます。 101 </td> 102 </tr> 103 </tbody> 104 </table> 105 </div> 106 </section>
css
1.ac-open{ 2 display:none; 3}
jquery
1$(function(){ 2 $('#acMenu').on("click", function() { 3 $(this).next().slideToggle(); 4 }); 5}); 6
試したこと
eachメソッドを使えばいいのかと思いましたが、だめでした。
補足情報(FW/ツールのバージョンなど)
#acMenuを押せばどれも開くと思うのですが、複数ある場合はjqueryの記述方法は違ってくるのでしょうか。
わかる方いらっしゃったら教えてください。よろしくお願い致します。
追記します。
html
1<section class="sms-small"> 2 <h3 class="acMenu">人と企業をつなぐストーリー冊子制作</h3> 3 <div class="ac-open"> 4 <table> 5 <tbody> 6 <tr> 7 <th>■期間</th> 8 <td>1回</td> 9 </tr> 10 <tr> 11 <th>■⽉額</th> 12 <td>300万(1000冊)+税、100万(300冊)+税</td> 13 </tr> 14 </tbody> 15 </table> 16 <p class="sms-small-text"> 17 ※企業さまから人気のプランです。雑誌制作の経験を生かし、社員インタビューや 18 御社だけのストーリーなどを、雑誌風にデザインし、冊子として納品いたします。 19 冊子は、営業などにもご利用いただけます。(8〜12ページ程度) 20 </p> 21 </div> 22 </section> 23 <section class="sms-small"> 24 <h3 class="acMenu">PRライティング講座</h3> 25 <div class="ac-open"> 26 <h4>【2021年PRスクールstart】</h4> 27 <p class="sms-small-text"> 28 ※各種PR、メディアアプローチ、出版企画書、メディア視点でのア各種SNSドバイス、 29 営業企画書、メディアリストなど。これまでのオリジナル手法をすべてお伝えします。 30 </p> 31 </div> 32 </section> 33 <section class="sms-small"> 34 <h3 class="acMenu">その他オリジナルプラン</h3> 35 <div class="ac-open"> 36 <p class="sms-small-text"> 37 ご要望の多いオリジナルプランをご用意しました。PRやライティングの各種オリジナルプランをご要望の方へ、ご要望に沿ったプランを検討いたします。まずはお気軽にお問い合わせください。<a href="">お問い合わせはこちら</a> 38 </p> 39 </div> 40 </section>
プラスマイナスをクリックで表示切り替えるために追記したcssです。
css
1.ac-open{ 2 display:none; 3 margin-top:30px; 4} 5.acMenu{ 6 position:relative; 7} 8.acMenu::after,.acMenu::before{ 9 content: ""; 10 width:15px; 11 height:3px; 12 background-color: #604C3F; 13 position:absolute; 14 top:50%; 15 right:30px; 16 transform: translateY(-50%); 17} 18.acMenu::after{ 19 transform:translateY(-50%) rotate(90deg); 20 transition:0.5s; 21} 22.acMenu.selected::after { 23 transform: rotate(0); 24 transition: 0.5s; 25 }
jquery
1$(function() { 2 $('.acMenu').click(function() { 3 $(this).toggleClass('selected'); 4 $(this).next().slideToggle(); 5 }); 6 });
htmlで追記した部分のアコーディオンだけ開きません。なぜでしょうか。
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2020/12/16 07:48
2020/12/16 07:58
2020/12/16 08:02