アコーディオンで『開く:+』『閉まる:-』を画像のアイコンに変える方法が知りたいです。
現状ではテキストで『+』『-』を表現しています。
.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'); } }); })
回答2件
あなたの回答
tips
プレビュー