isara模写でのアコーディオン機能を実装させたいのですが上手くいきません。(何も反応しません)
他の方の質問等を参考にしコードを書きましたが、どこが間違っているか分かりません。
どなたか分かる方よろしくお願いします!
HTML
1<!doctype html> 2<html lang="ja"> 3 <head> 4 <meta charset="UTF-8"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 6 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 7 <title>Document</title> 8 <link rel="stylesheet" href="style.css"> 9 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 10 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.0/dist/css/bootstrap.min.css" integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l" crossorigin="anonymous"> 11 <script src="https://code.jquery.com/jquery-3.2.1.min.js"></script> 12 </head> 13 <body> 14 <div class="situmon"> 15 <div class="conteiner"> 16 <div class="situmon-content"> 17 <h1><span class="fas fa-envelope-open"></span>よくある質問</h1> 18 </div> 19 <div class="situmon-list"> 20 <ul class="ul-list"> 21 22 <li class="list-item"> 23 <h3 class="h-question"><a href="#"><span class="fas fa-question-circle"></span>プログラミングスキルは必要ですか?<span class="fas fa-angle-down angle"></span></a></h3> 24 <div class="list-answer"> 25 <p>いいえ、必要ありません。しかし、iSaraでは参加費以上の金額が稼げることを保障しています。 従って、事前通話面談時点で簡単なテストを<br> 26 実施し、場合によってはお断りをしております。この点だけはご了承ください。</p> 27 </div> 28 </li> 29 30 </ul> 31 </div> 32 33 34 </div> 35 </div> 36 37 <script src="javascript.js"></script> 38</body> 39</html>
CSS
1.situmon{ 2 height: 1220px; 3 4 .situmon-list{ 5 display: inline-block; 6 .list-item{ 7 position: relative; 8 cursor: pointer; 9 list-style: none; 10 h3{ 11 width: 1170px; 12 height: 64px; 13 font-size: 20px; 14 font-weight: bold; 15 letter-spacing: 1px; 16 text-align: left; 17 border: 1px solid gray; 18 border-radius: 5px; 19 margin: 0 auto; 20 padding: 20px; 21 22 a{ 23 color: black; 24 } 25 26 .fa-question-circle{ 27 color: black; 28 } 29 30 .fa-angle-down{ 31 float: right; 32 line-height: 32px; 33 } 34 35 .angle{ 36 position: absolute; 37 top:15px; 38 right:15px; 39 } 40 } 41 42 p{ 43 /*display: none;*/ 44 font-size: 16px; 45 font-weight: bold; 46 letter-spacing: 1px; 47 line-height: 1.6; 48 text-align: left; 49 display: none; 50 } 51 } 52 } 53}
javascript
1$(function(){ 2 3 4$('.h-question').click(function(){ 5 $(this).next().next('.list-answer').slideToggle(); 6 7 $(this).toggleClass("open"); 8 }); 9});
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。