jQueryで作るアコーディオンでの不具合について

Question

前提・実現したいこと

http://plustrick.com/blog/2014/0301/
こちらのサイトのように任意のアコーディオンをクリックしたら開閉時に
右端にあるアイコンが切り替わるのですが

私が作っているアイコンはに＋から開閉時にはーに切り替わる実装で切り替わるのですが
他のボタンも全て同じ実装で切り替わります。

/* CSS */
h3.icon.open::after {
font-family: "FontAwesome";
content: '\f068';
position: absolute;
right: 30px;
}

     h3.icon::after {
      font-family: "FontAwesome";
      content: '\f067';
      position: absolute;
      right: 30px;
    }

クリックしたボタンだけをアコーディオンにするにはどのような
指定にすればいいのでしょうか？
お詳しい方分かりやすく解説していただけませんでしょうか？
どうぞ宜しくお願い致します。

該当のソースコード

私が作ったコードになります。

    // アコーディオン
    $(function(){
      $('.job').on('click',function(){
        $('.icon').toggleClass('open');
        $(this).next('dl').slideToggle(500);
      })
    });

試したこと

ネットで色々と検索して実装したのですが
うまくいきません。

Comments

[m.ts10806]

タイトルにある「不具合」が発生している箇所はどこでしょうか。

[x_x]

いきなりサンプルのアドレスがあるようですが、記事のほうは参照しているのでしょうか？　http://plustrick.com/jquery_accordion/

[x_x]

参考サイトと違う作りにしているのであれば、HTMLも提示願います。

[r.baagio10]

参考サイトと同じようにテストして作ったのですがうまくいきませんでした。

[x_x]

どの辺が同じになっているのでしょうか？　参考サイトには動くスクリプトもありますよね

Answer 1

こうですかね。

$(function(){
  $('.job').on('click',function(){
    $(this).toggleClass('open');
    $(this).next('dl').slideToggle(500);
  })
});

Comments

[r.baagio10]

なおりました。
ありがとうございます。
今回の原因は何だったんでしょうか？

修正前 $('.icon').toggleClass('open');

修正後　　　$(this).toggleClass('open');

[w.kensington]

$('.icon')だとページにある全てのiconクラスが付いている要素が対象になってしまいます。
今回クリックしたボタンだけという要望だったので、$(this)にすることで自分自身にtoggleClassが当たるようにしました。
jqueryのdom操作は基本的なところなので、以下のサイトなどをみて勉強するといいです。
https://www.flatflag.nir87.com/this-1371

[r.baagio10]

使い方について詳しく教えていただきありがとうございます。
参考サイトを見て勉強します。

Answer 2

htmlがないので予測ですが。。

<div class="job">
  <h3 class="icon"></h3> ← .jobの中にiconを入れる
</div>
<dl>
  <dt>タイトル</dt>
  <dd>テキストテキスト</dd>
  <dd>テキストテキスト</dd>
  <dd>テキストテキスト</dd>
  <dd>テキストテキスト</dd>
  <dd>テキストテキスト</dd>
</dl>

// アコーディオン
$(function(){
  $('.job').on('click',function(){
    $(this).find('.icon').toggleClass('open'); ← .jobのfindで指定することでクリックした要素のみ展開する
    $(this).next('dl').slideToggle(500);
  })
});

Comments

[r.baagio10]

回答していただきありがとうございます。
教えてもらったコードを試したのですが＋のアイコンだけが
開閉する実装になり
開閉時にーのアイコンを切り替わるようにしたいのですがどのように設定すればいいでしょうか？
こちらがHTMLコードになります。

<div class="recruit-box">
<h3 class="job icon">職種①</h3>
<dl class="job-wrap clearfix">
<dt>職種</dt>
<dd>組立、仕上げ他、生産全般に関する業務事務所受注から納品に関する業務 ( 営業、見積、材料手配、外注<br>及び工程管理、検査、仕上げ、納品 )</dd>
<dt>雇用形態</dt>
<dd>正社員としての採用</dd>
<dt>賃金</dt>
<dd>基本給 + 各種手当 ( 通勤、給食、家族等 )　毎月末払い　昇給あり、賞与年 2 回</dd>
<dt>必要な経験等</dt>
<dd>新卒の場合は、ものづくりに興味がある方なら、社員教育により必要な経験・知識等を身に付けることが<br>できます。既卒の場合は、中途採用を含めて工場勤務なら生産現場での組立経験、事務所勤務なら購買、<br>生産管理、営業、品質管理の経験を活かせます。</dd>
<dt>必要な免許・資格</dt>
<dd>普通自動車免許 (AT 限定可 )</dd>
<dt>社会保険等</dt>
<dd>社会保険等　健康保険、雇用保険、厚生年金、労災保険、退職金共済制度</dd>
<dt>職種</dt>
<dd>1 年単位の変形労働制　8:00 から 17:00( 休憩時間は計 60 分あり )<br>年間労働日数 260 日 ( 年間休日 105 日 )<br>土曜日出勤・休日は弊社カレンダーによります。</dd>
<dt>定年制度</dt>
<dd>定年制度　一律 60 歳を定年とします。</dd>
</dl>
</div>