🎄teratailクリスマスプレゼントキャンペーン2024🎄』開催中!

\teratail特別グッズやAmazonギフトカード最大2,000円分が当たる!/

詳細はこちら
jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

1回答

1044閲覧

アコーディオンの実装について

shunsaku87

総合スコア39

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

HTML

HTMLとは、ウェブ上の文書を記述・作成するためのマークアップ言語のことです。文章の中に記述することで、文書の論理構造などを設定することができます。ハイパーリンクを設定できるハイパーテキストであり、画像・リスト・表などのデータファイルをリンクする情報に結びつけて情報を整理します。現在あるネットワーク上のほとんどのウェブページはHTMLで作成されています。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

0クリップ

投稿2020/12/16 06:53

編集2020/12/16 07:47

前提・実現したいこと

複数のアコーディオンを実装したいです。

発生している問題・エラーメッセージ

アコーディオンにしたいコンテンツがたくさん上から並んでいるのですが、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で追記した部分のアコーディオンだけ開きません。なぜでしょうか。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

「acMenu」というidを複数のHTML要素に付加してはいけません
1ページに付き同じidは一箇所だけ許されます
おそらくやりたいことはclassを利用してやるとよいでしょう
(文字化けしてたので更新)

投稿2020/12/16 07:09

編集2020/12/16 08:15
yambejp

総合スコア116694

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

shunsaku87

2020/12/16 07:48

ありがとうございます。 初歩的なことでした。解決しました。 しかし、一番下の3つだけ開かないのはなぜでしょうか。 上記に追記しましたので、お手数ですが、見て頂けないでしょうか。
yambejp

2020/12/16 07:58

> 一番下の3つだけ開かないのはなぜでしょうか どの部分のことでしょうか? いまあるソースで普通に開閉しているように見えますが・・・
shunsaku87

2020/12/16 08:02

追記したhtmlの部分が一番下のセクションになります。 他は開いたのですが、その3つだけ開きません。 何か思い当たることはありませんか? お忙しいところ申し訳ありません。よろしくお願い致します。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.36%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問