【jQuery】アコーディオンで『開く：＋』『閉まる：-』アイコンを画像にしたい

アコーディオンで『開く：＋』『閉まる：-』を画像のアイコンに変える方法が知りたいです。
現状ではテキストで『+』『-』を表現しています。
.attrで画像を取得すれば変更できるかと思ったのですが、うまくできず、、
よろしくお願いいたします。

<!-- HTML -->
<body>
<div class="faq-wrapper">
  <div class="container">
    <ul id="faq-list">
      <li class="faq-list-item">
        <h3 class="question">質問①が入ります：ダミーダミーダミーダミー</h3>
        <span>+</span>
        <div class="answer">
          <p>答えが入ります：ダミーダミーダミーダミー</p>
        </div>
      </li>
      <li class="faq-list-item">
        <h3 class="question">質問②が入ります：ダミーダミーダミーダミー</h3>
        <span>+</span>
        <div class="answer">
          <p>答えが入ります：ダミーダミーダミーダミー</p>
        </div>
      </li>
      <li class="faq-list-item">
        <h3 class="question">質問③が入ります：ダミーダミーダミーダミー</h3>
        <span>+</span>
        <div class="answer">
          <p>答えが入ります：ダミーダミーダミーダミー</p>
        </div>
      </li>
    </ul>
  </div>
</div>
</body>

/* CSS */
.faq-list-item {
  margin: 10px;
  border-bottom: 1px solid #ccc;
  position: relative;
  cursor: pointer;
}

.faq-list-item h3 {
  font-size: 14px;
}

.faq-list-item span {
  position: absolute;
  top: 0;
  right: 5px;
  color: #ccc;
  font-size: 13px;
}

.question {
  margin-bottom: 10px;
}

.answer {
  font-size: 12px;
  padding: 5px 0;
  margin-bottom: 15px;
  display: none;
}

// JS
$(function() {
  $('.faq-list-item').click(function(){

    var $answer = $(this).find('.answer');

    if ($answer.hasClass('open')) {
      $answer.removeClass('open');
      $answer.slideUp();
      $(this).find('span').text('+');
    } else {
      $answer.addClass('open');
      $answer.slideDown();
      $(this).find('span').text('-');
    }
  });
})

以下試した記述です↓↓↓↓↓

<li class="faq-list-item">
  <h3 class="question">質問①が入ります：ダミーダミーダミーダミー</h3>
  <!-- spanをimgに -->
  <img src="img/open.png" alt="">
  <div class="answer">
    <p>答えが入ります：ダミーダミーダミーダミー</p>
  </div>
</li>

/* CSS */
/* spanをimgに */
.faq-list-item img {
  position: absolute;
  top: 0;
  right: 5px;
  color: #ccc;
  font-size: 13px;
}

// JS
$(function() {
  $('.faq-list-item').click(function(){

    var $answer = $(this).find('.answer');

    if ($answer.hasClass('open')) {
      $answer.removeClass('open');
      $answer.slideUp();
      // 以下を修正しました
      $(this).find('img').attr('src', '../img/open.png');

    } else {
      $answer.addClass('open');
      $answer.slideDown();
　　　// 以下を修正しました
      $(this).find('img').attr('src', '../img/close.png');
    }
  });
})

kei344

2018/04/07 05:39

「attrで画像を取得」のコードも質問文に追記してください。

shiosu

2018/04/07 06:06

閲覧ありがとうございます！修正いたしました > <

行動規範の内容に同意します

回答2件

background-imageで指定できますよ。
開いたときにクラスを付与してマイナスの画像をbackground-imageで上書きすればできます。閉じたら付与したクラスを削除すればプラスの画像に戻るかと思います。

投稿2018/04/07 06:01

退会済みユーザー

総合スコア0

shiosu

2018/04/07 06:52

お返事ありがとうございます！ background-imageでも試してみます！助かりました、、

行動規範の内容に同意します

ベストアンサー

動くサンプル：https://jsfiddle.net/7cmgykxb/

書かれているコードでほぼ動くので、画像のパスが問題なのでは。

投稿2018/04/07 06:15

kei344

総合スコア69400

shiosu

2018/04/07 06:43 編集

サンプルまで、ありがとうございます！！ご指摘いただいてコンソールで見たら、確かに『ERR_FILE_NOT_FOUND』と出ていました、、ドリームウィーバー上で、画像のパスの上にカーソルを合わせると、ちゃんと表示されるのでパスは間違っていないと思っていました、、頂いたサンプルをコピペしてパスだけ変えると、やはりクリックすると消えてしまいます、、ディレクトリは以下なのですが、 index.html css └ style.css img └ close.png └ open.png jsフォルダ └ script.js 『.attr('src', '../img/close.png’)』←このパス間違っていますか？？何度もすません ; _ ;