どこクリックしても同じイベントが起こるようにしたい

Question

###実行したい事
①名前をクリックする
②非表示にしていたものが出てくる(アコーディオン)
③画像をクリックしたときも同じイベントが起きる
④名前をクリックしても画像を切り替えたい(オープン→クローズ)

###分からないこと
名前をクリックしたときは②非表示にしていたものが出てくるが
画像をクリックしてもオープン→クローズの画像切り替えのみで②非表示にしているものが出てきません。
.staff_btnをクリックの部分に入れれば動くかな…？と思い入れてみましたが、
両方動かなくなったので.staff_btnをクリックイベントから省いています。

.staff_nameクリック→　.staff_bunの内容が出てくる＆.staff_btnの画像が切り替わる
.staff_btnクリック→　.staff_bunの内容が出てくる＆.staff_btnの画像が切り替わる

どっちをクリックしても同じ動きをするように実装したいです。

↓WEB上で動くようにしました。
https://jsfiddle.net/80orvLmx/

<div>
  <div class="staff_in">
    <div class="staff_name">
      <h3>ここに名前</h3>
      <img src="https://placehold.jp/150x150.png" alt="" class="staff_kao" >
    </div>
    <div class="staff_bun">
      <div>
        <dl>
          <dt>Q1</dt>
          <dd>A1</dd>
          <dt>Q2</dt>
          <dd>A2</dd>
          <dt>Q3</dt>
          <dd>A3</dd>
        </dl>
      </div>
    </div>
    <div class="staff_btn">
      <img class="onoff-btn" src="https://placehold.jp/30x30.png">
    </div>
  </div>
 </div>
 
 <script>
   var onoff = "off";
   var onimg = "https://placehold.jp/ffffff/ffffff/30x30.png";
   var offimg = "https://placehold.jp/30x30.png";

   $('.onoff-btn').click(function() {
     switch (onoff) {
       case "off":
         onoff = "on";
         $(this).attr('src',onimg);
         break;
       case "on":
         onoff = "off";
         $(this).attr('src',offimg);
         break;
     }
   });
</script>

$(function() {
  //パネルを非表示
  $('.staff_bun').hide();
  $('.staff_name')
    .click(function(e){
 //クリックでパネルを開く
      $('+.staff_bun', this).slideToggle(500);
    })
});

.staff_in{
	background: red;
	padding: 40px 40px 70px 40px;
	width: 520px;
	cursor: pointer;
	cursor: hand;
	position: relative;
}
.staff_btn{
	position: absolute;
	padding-top:30px;
	left: 50%;
	transform: translateX(-50%);
}

.staff_name{
	position: relative;
	padding-left: 30px;
}
.staff_name img{
	position: absolute;
	top:-95px;
	right:0;
}
.staff_name h3{
	font-size:3em;
	line-height: 0.8em;
}
.staff_bun{
	background: #fff;
	border-radius: 40px;
	margin-top: 50px;
	cursor: default;
}
.staff_bun dl{
	padding:30px 60px;
}

「クリックで表示する」と「画像の切り替え」のコードが２つに分かれてしまっているので
もう少しスマートな書き方があれば教えていただきたいです。
よろしくお願いします。

Answer 1

triggerするのが楽です。

$(function() {
   var onimg = "https://placehold.jp/ffffff/ffffff/30x30.png";
   var offimg = "https://placehold.jp/30x30.png";

  // パネルを非表示
  $('.staff_bun').hide();

  // クリックでパネルを開く
  $('.staff_name').click(function(e){
    var bun = $('+.staff_bun', this).slideToggle(500);
    var btn = bun.next().find('.onoff-btn');
    btn.attr('src', btn.attr('src') === onimg ? offimg : onimg);
  })

  $('.onoff-btn').click(function() {
    $(this).parent().prev().prev().trigger('click');
  });
});

Comments

[satoshickkk]

x_x様
ご回答ありがとうございます。
教えていただいたtriggerを使用したものに変更して動きを確認しました。
名前クリックした場合は.staff_btnの画像がちゃんと切り替わるのですが
.staff_btnの画像をクリックすると.staff_bunは表示されますが
.staff_btnの画像の切り替えがうまくいきません。

こちらの原因はお分かりになられますか…？

[x_x]

再現できませんね。
btn.attr('src')
のところでブレイクし、onimgと完全に一致するものがとれているか確認してもらってもいいでしょうか？

[satoshickkk]

すいません、onimgと完全に一致するものがHTMLの方に
記入していなかったため、きちんと出来ておりませんでした。
一致するものを記入したら問題無く動きました！
ありがとうございます…！

Answer 2

未検証。

jQuery('.staff_in').on('click', '.staff_name,.onoff-btn', function handleClick (event) {
  jQuery('.staff_bun', event.currentTarget).slideToggle(500);
  
  const offimg = 'https://placehold.jp/30x30.png', onimg = 'https://placehold.jp/ffffff/ffffff/30x30.png';
  const btn = jQuery('.onoff-btn', event.currentTarget);

  btn.attr('src', btn.attr('src') === offimg ? onimg : offimg);
});

Re: satoxmato さん

Answer 3

click()の代わりにon()を使うことで複数にイベントを登録できます。
下記のようにしてみてください。（HTML内に書いてるほうはいりません。onoffのフラグもいりません。）

$(function() {
  //パネルを非表示
  $('.staff_bun').hide();
  $(document).on("click touchend", ".staff_name, .onoff-btn", function () {
    //クリックでパネルを開く
    $('.staff_bun').slideToggle(500);
    // 画像を切り替える
    $('.onoff-btn').toggle(function(){
      $('.onoff-btn').attr('src','https://placehold.jp/ffffff/ffffff/30x30.png');
    },function(){
      $('.onoff-btn').attr('src','https://placehold.jp/30x30.png');
    });
  });
});

（コメントを受けて追記）複数ある場合でクリックしたものだけにしたい場合

これでどうでしょうか？

$(function() {
  //パネルを非表示
  $('.staff_bun').hide();
  $(document).on('click touchend', '.staff_name, .staff_btn', function () {
    //クリックでパネルを開く
    $(this).parent().find('.staff_bun').slideToggle(500);
    // 画像を切り替える
    var $img = $(this).parent().find('.onoff-btn');
    $img.toggle(function(){
      $img.attr('src','https://placehold.jp/ffffff/ffffff/30x30.png');
    },function(){
      $img.attr('src','https://placehold.jp/30x30.png');
    });
  });
});

Comments

[satoshickkk]

runny_nose様
ありがとうございます。
教えていただいたものを書き込み試してみたところ
複数ある.staff_bunが全て反応して開いてしまいます…。

どこかに原因があったり、この場合は追加で処理をしなければならないのでしょうか？

[runny_nose]

最初の例ではクラス全部にかかってしまうので、
クリックしたものの兄弟要素を取得して行う必要があります。
回答文に追記したものだとどうでしょうか？
JSFiddleでフォークもしてみました。　⇒　https://jsfiddle.net/tqpkwnj3/

[runny_nose]

ちなみにclickイベントのみだとレスポンシブ対応（スマホ対応）する場合に、
タッチの反応速度が遅かったりするので、上記のように`touchend` もしくは`touchstart`も購読したほうがいいかもしれません。

Answer 4

表示は

 $('.staff_bun').show();

とか

 $('.staff_bun').fadeIn();

が必要です
他にも表示方法はいくつかあります(jsでcss変更とか)
がこれが簡単かなと思います

staff_nameクリックはクリックイベントのセレクタを両方にして
処理のセレクタでthisを省くとどうでしょうか？

$('.staff_name, .staff_bun').click(function(){

$('.staff_bun').show();

でもstaff_bunは非表示なのでクリック出来るのでしょか？

関係ないかもですが、
もしかして表示・非表示にしたい要素が間違ってないですか？

Comments

[satoshickkk]

$('.staff_bun').show();や $('.staff_bun').fadeIn();が
かかれていなくても表示されてしまう事自体がおかしいのですね…！
勉強になります。
staff_bunをクリックではなくstaff_btnです。
間際らしく申し訳ないです。

[akihiro3]

いやいや、こちらの方がごめんなさい。
この回答自体間違ってますね

satoxmatoさんは申し訳なくないですよ
私がslideToggleを分かってなかったですし、
staff_btnとstaff_bunをしっかり見てなかったでした