実現したいこと
３つの「Q&A」のうち、最初のアコーディオンのみ開いた状態にしています。
発生している問題・分からないこと
最初のアコーディオンのみ開いた状態にすることはできたのですが、
右側に表示させている「＋」のアイコンを「−」にしたいです。
（閉じると「＋」にしたいため、現状では逆になっています）
どのようなコードを加えたら良いでしょうか？
該当のソースコード
HTML
1<section id="worry"> 2 <div class="maincontent"> 3 <dl class="worry-list"> 4 <dt class="question-ttl js-title"> 5 毎日督促の電話が鳴りやみません。<br class="pc"> 6 すぐに止めることは可能ですか？ 7 </dt> 8 <dd class="answer-text default"> 9 <p>可能です。 10 ご依頼をいただくと、最短即日で金融業者へ督促ストップの交渉を開始します。また、司法書士にご依頼いただくと、ご依頼者様が業者と直接やりとりする必要はなくなりますので、精神的な苦痛からすぐに解放されます。 11 </p> 12 </dd> 13 </dl> 14 <dl class="worry-list"> 15 <dt class="question-ttl js-title"> 16 任意整理をすると、家族や職場に知られますか？ 17 </dt> 18 <dd class="answer-text"> 19 <p>任意整理をしたことを職場に知られることは原則ありません。<br> 20 また、ご家族が保証人でなければ、通知等が届くことはなく、通知や請求によって家族に知られることはありませんので、ご安心ください。 21 </p> 22 </dd> 23 </dl> 24 <dl class="worry-list"> 25 <dt class="question-ttl js-title"> 26 過払い金請求・任意整理は急いだ方が良いのですか？ 27 </dt> 28 <dd class="answer-text"> 29 <p>現在、過払い金返還に応じる消費者金融・クレジット会社でも、今後経営が悪化し返還に応じなくなる可能性があります。 そのため、過払い金請求や任意整理手続きは早く行うことを強くお勧めいたします。 30 </p> 31 </dd> 32 </dl> 33 </div> 34 </div> 35 </section>
CSS
1#worry .worry-list {2 margin-bottom: 30px;3}4 5#worry .question-ttl {6 position: relative;7 display: flex;8 background: #cee59d;9 font-size: 28px;10 font-weight: 900;11 padding: 20px 120px 15px 20px;12 line-height: 1.5em;13 cursor: pointer;14}15 16#worry .question-ttl:before {17 content: url('../images/Question.png');18 margin-right: 15px;19 display: block;20}21 22#worry .question-ttl:after {23 position: absolute;24 display: block;25 font-family: "Font Awesome 5 Free";26 content: '\2b';27 top: 20px;28 right: 30px;29 font-size: 38px;30 color: #f65a0f;31 transition: all .3s ease-in-out;32}33 34#worry .question-ttl.open:after {35 transform: rotate(-180deg);36 top: 20px;37 font-size: 28px;38 content: '\f068';39}40 41#worry .answer-text {42 background-color: #fff;43 border: solid .5px #999;44 display: none;45 padding: 20px 40px 20px 80px;46}47 48#worry .answer-text.default{49 display: block;50}51 52#worry .method-hidden:after {53 position: absolute;54 display: block;55 font-family: "Font Awesome 5 Free";56 content: '\2b';57 top: 20px;58 right: 50%;59 font-size: 38px;60 color: #f65a0f;61 transition: all .3s ease-in-out;62 z-index: 50;63}64 65#worry .method-hidden.open:after {66 transform: rotate(-180deg);67 top: 20px;68 font-size: 28px;69 content: '\f068';70}
js
1$(function () {2 $(".js-title").on("click", function () {3 $(this).next().slideToggle(200);4 $(this).toggleClass("open", 200);5 });6});
試したこと・調べたこと
上記の詳細・結果
うまく実現できませんでした。
補足
教えていただける方、どうぞよろしくお願いいたします。
0 コメント