toggleClassで上下矢印が逆転しないようにしたい

Question

前提・実現したいこと

初歩的なことですみませんが、手こずっています。
toggleClassを使ってアコーディオンパーツを作っています。

上下にボタンを設置して以下のような構成になっています。

－－－－－－－－－－－－－－－－－－－－－－－－－－－－－
上が開く＋　下向き矢印

「この間にコンテンツ」

下に閉じるボタン
－－－－－－－－－－－－－－－－－－－－－－－－－－－－－

上のボタンを押すと矢印が上向きになります。

上のボタンだけで操作する場合は問題ないのですが、
下のボタンで閉じるを押すと、矢印が上向きのままアコーディオンが
閉じてしまい、逆転するという現象になります。

下の閉じるボタンを押した際にもちゃんと矢印が
戻る？ような形で開く時と閉じた時の整合性を
取りたいので、すみませんが教えていただけませんでしょうか。

現在のコード

【JQuery】
$(function(){
    $( ".opener__btn span" ).click(function(){
        $(".detail").slideToggle('slow');
        $(this).toggleClass("active");
    });
});

【HTML】
<div class="opener__btn"><span>詳しく<br>見る</span></div>
    <div class="detail">
    コンテンツ
    </div>
<div class="opener__btn close"><span>閉じる</span></div>

###　追記

.opener__btn span {
  display: inline-block;
  background-image: url(../images/common/icon-arrow-headdown-b.png);
  background-repeat: no-repeat;
  background-size: 24px 20px;
  background-position: center bottom 4px;
  cursor: pointer;
}
.opener__btn span.active {
  background-image: url(../images/common/icon-arrow-headup-b.png);
  background-repeat: no-repeat;
  background-size: 24px 20px;
  background-position: center bottom 4px;
}
.opener__btn.close span {
  background-image: none;
}

Comments

[yambejp]

矢印がわかるサンプルをつけてください
矢印自体画像？テキスト？

[m.ts10806]

CSSもご提示ください

[lingwood]

yambejpさん、m.ts10806さん
目に留めていただいてありがとうございます！
矢印は＞を90度回させたよくあるものです。
activeにしたときバックグランドのimgが切り替わるというシンプルなもので
一旦テスト実装しています。
使わなければ全然問題ないのですが、せっかくなのでボタンを押すと切り替わるものにしたいと思いました。

よろしくお願いします。

Answer 1

下記でいいかと。

$(function(){
    $( ".opener__btn span" ).click(function(){
        $(".detail").slideToggle('slow');
        $(".opener__btn span").toggleClass("active");
    });
});

$(this).toggleClass("active");だとクリックした要素($(this))だけにClassを付加/削除します。

$(".opener__btn span").toggleClass("active");だと.opener__btn span要素が対象になります。

追記

閉じたときに「閉じる」ボタンが表示されているのは不自然なので、下記の方がいいかも。

$(function(){
    $( ".opener__btn span" ).click(function(){
        $(".detail").slideToggle('slow');
        $(".opener__btn span").toggleClass("active");
        $(".opener__btn.close span").toggle();
    });
});

Comments

[lingwood]

hatena19さん
ご回答ありがとうございます！
え？って思ったんですがテストしたらできました！
よくよく考えれば、確かに！ということでお恥ずかしい限りです。
ちょっとした思考の切り換え方の部分って大きいですね。
よりコンパクトになってありがたく思います。
ベストアンサーに選べずすみません。
またの際にもよろしくお願いします！！

[yambejp]

「閉じる」と「詳しく見る」のトグルでは明らかに機能が違うと思います
この処理が希望でしたら「閉じる」をおして、閉じているときに
「開く」に変わるようにしたほうがよいでしょう
ただ、同じ機能をそんなに近くに盛り込んでもしょうがないので
閉じるは閉じるだけでいいと思いますけどね・・・

[hatena19]

「閉じる」ボタンなら閉じているときは非表示にするのが自然な動作かと思いますので、修正コードを追記しました。

[lingwood]

yambejpさん、hatena19さん
いろいろとご考案いただきまして、本当にありがとうございます。
小生の説明不足のせいでいろいろとすみません。
閉じるボタンはdetailのコンテンツ領域に入っているため、
初期状態では非表示です。
コンテンツが長いため本来こういう見せ方が良いのかは微妙なんですが・・・

ただ、確かに明らかに機能が違いますので、いっしょくたに捉えてしまってすみません。
あまり詳しくないので、できた部分でしか見えておりませんでyambejpさんにご不快な
思いをさせてしまったのではと申し訳なく思います。

今回やりたかったことは、上記の方法で解決できておりますし、
素晴らしいご回答をいただきましたことに深く感謝しております！

ありがとうございます！

[lingwood]

hatena19さん
追記コードを授けていただきまして、ありがとうございます！！
こちらも今後のためにもしっかり備忘録に控えさせていただきたいと思います。
ありがとうございました！

Answer 2

「閉じる」ボタンはトグルしなくて閉じるだけでよいのでしょうか？

<script>
$(function(){
  $( ".opener__btn span" ).on('click',function(){
    $(".detail").slideToggle('slow');
    $(this).toggleClass("active");
  });
  $( ".close" ).on('click',function(){
    $(".detail").slideUp('slow');
    $(".opener__btn span").addClass("active");
  });
});
</script>
<div class="opener__btn"><span>詳しく<br>見る</span></div>
    <div class="detail">
    コンテンツ
    </div>
<div class="close"><span>閉じる</span></div>

Comments

[lingwood]

yambejpさん
遅くなってすみません。ありがとうございます！
今から試してきます！！
閉じるボタンはそのままでいいかな～って思ってます！

[lingwood]

yambejpさん
ありがとうございました！！
.slideUpを使うんですね。
最初できなかったんですが、
$(".opener__btn span").addClass("active");
→　.removeClassにしたら最終的にうまく動きました！！
本当にありがとうございました！
すごく助かりました、勉強になりました！
またの際にもよろしくお願い致します。