タイトルの通り、以下のコードにtransition効果をつけて、ゆっくり開閉するようにしたいのですが、
cssにtransitionを設定しても動作せず、すぐに開閉してしまいます。
jqueryで行えば簡単ですが、ネイティブのjavascriptでゆっくり開閉させるには、どのようにすればよいのでしょうか?
ご教授の程宜しくお願い致します。
<dl> <dt class="question">よくある質問</dt> <dd class="answer">よくある質問の答え</dd> </dl> <dl> <dt class="question">よくある質問2</dt> <dd class="answer">よくある質問の答え</dd> </dl> <dl> <dt class="question">よくある質問3</dt> <dd class="answer">よくある質問の答え</dd> </dl> <style> dl { border-bottom: 1px solid #333; padding: 10px; } dd { transition: all 0.3s ease; } </style> <script> var answr = document.getElementsByClassName("answer"); for (i = 0; i < answr.length; i++) { answr[i].style.display = "none"; } var qst = document.getElementsByClassName("question"); for (i = 0; i < qst.length; i++) { let answers = qst[i].nextElementSibling; qst[i].addEventListener("click", function () { if (answers.style.display == "none") { answers.style.display = "block"; } else { answers.style.display = "none"; } }, false); } </script>
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。