質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

Q&A

1回答

635閲覧

アコーディオン クリックで+をーにするには

hta

総合スコア1

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

jQuery

jQueryは、JavaScriptライブラリのひとつです。 簡単な記述で、JavaScriptコードを実行できるように設計されています。 2006年1月に、ジョン・レシグが発表しました。 jQueryは独特の記述法を用いており、機能のほとんどは「$関数」や「jQueryオブジェクト」のメソッドとして定義されています。

Bootstrap

BootstrapはウェブサイトデザインやUIのWebアプリケーションを素早く 作成する可能なCSSフレームワークです。 Twitter風のデザインを作成することができます。

0グッド

0クリップ

投稿2020/11/08 16:32

Bootstrapを使ってアコーディオンを作っているのですが、質問の後のspanタグの中の+をクリックイベントでーに変えるにはどのようにすれば良いのでしょうか?
jquelyを使うといいと言われたのですが、どこに記述すればいいのか又は新しくファイルを作成した方がいいのか教えて頂けると助かります。

Html

1コード 2```<!doctype html> 3<html lang="ja"> 4 <head> 5 <!-- Required meta tags --> 6 <meta charset="utf-8"> 7 <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> 8 <!-- Fontawesome --> 9 <link href="https://use.fontawesome.com/releases/v5.6.1/css/all.css" rel="stylesheet"> 10 <!-- Bootstrap CSS --> 11 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous"> 12 <link rel="stylesheet" href="style.css"> 13 <title>Hello, world!</title> 14 15 </head> 16 17 <body> 18 19 <!-- Landing page --> 20<main id="contact"> 21 <div class="main-img align-items-center"> 22 <img src="img/bg-2.jpg" alt=""class="d-block mx-auto"> 23 <div class="main-title text-center"> 24 <h1>AFS-1000</h1> 25 <h2>よくある質問</h2> 26 </div> 27 </div> 28</main> 29 <!-- End Landing page --> 30<section> 31 <div class="panel-heading"> 32 <h4 class="panel-title bg-primary text-white text-center">検査に関して 33 </h4> 34 </div> 35</section> 36 <div class="accordion" id="accordion-4"> 37 <div class="card"> 38 <div class="card-header" id="header-4a"> 39 <button class="btn btn-link text-decoration-none mb-0 " type="button" 40 data-toggle="collapse" data-target="#card-4a" 41 aria-expanded="true" aria-controls="card-4a"> 42 <p><span>Q.</span>検査結果が出るまでの所要時間「8分」は適正なのでしょうか?<span>+</span></p> 43 </button> 44 </div> 45 <div id="card-4a" class="collapse" 46 aria-labelledby="header-4a" data-parent="#accordion-4"> 47 <div class="card-body"> 48 <p><span>A.</span>Covid-19の検査結果に関する国際基準が設定されていないため、それぞれのメーカーが研究を重ね、的確な結果が出るように機器を設計しています。本機器については手順通りの時間(8分)で測ることをお勧めします。</p> 49 </div> 50 </div> 51 </div> 52 <div class="card"> 53 <div class="card-header" id="header-4b"> 54 <button class="btn btn-link text-decoration-none mb-0" type="button" 55 data-toggle="collapse" data-target="#card-4b" 56 aria-expanded="false" aria-controls="card-4b"> 57 <p><span>Q.</span>IgM,IgGの基準の単位T/Cとはなんでしょうか?<span>+</span></p> 58 </button> 59 </div> 60 <div id="card-4b" class="collapse" 61 aria-labelledby="header-4b" data-parent="#accordion-4"> 62 <div class="card-body"> 63 <p><span>A.</span>Target/Control. Tは感染、Cは非感染の免疫グロブリンを表します。</p> 64 </div> 65 </div> 66 </div> 67 <div class="card"> 68 <div class="card-header" id="header-4c"> 69 <button class="btn btn-link text-decoration-none mb-0" type="button" 70 data-toggle="collapse" data-target="#card-4c" 71 aria-expanded="false" aria-controls="card-4c"> 72 <p><span>Q.</span>蛍光抗体検査機器の精度はどのくらいでしょうか?<span>+</span></p> 73 </button> 74 </div> 75 <div id="card-4c" class="collapse" 76 aria-labelledby="header-4c" data-parent="#accordion-4"> 77 <div class="card-body"> 78 <p><span>A.</span>95%以上の精度となっています。</p> 79 </div> 80 </div> 81 </div> 82 <div class="card"> 83 <div class="card-header" id="header-4d"> 84 <button class="btn btn-link text-decoration-none mb-0" type="button" 85 data-toggle="collapse" data-target="#card-4d" 86 aria-expanded="false" aria-controls="card-4d"> 87 <p><span>Q.</span>基準値(カットオフ)について、イタリアとその他の国がなぜ違うのでしょうか?<span>+</span></p> 88 </button> 89 </div> 90 <div id="card-4d" class="collapse" 91 aria-labelledby="header-4d" data-parent="#accordion-4"> 92 <div class="card-body"> 93 <p><span>A.</span>コロナに対するIgG IgM の世界的な基準となるカットオフは定められておりません。イタリアは自国民とコロナウィルスの関連性に関して研究が進んでおり、イタリアに住んでいる民族に対して的確と考えうる基準値が決められています。</p> 94 </div> 95 </div> 96 </div> 97 </div> 98 <div class="panel-heading"> 99 <h4 class="panel-title bg-primary text-white text-center">検査に関して 100 </h4> 101 </div> 102 103 <div class="accordion" id="collapse-accordion"> 104 <div class="card mb-2"> 105 <div class="card-header" id="headingOne"> 106 <h5 class="mb-0"> 107 <button class="btn btn-link btn-block text-center text-decoration-none" type="button" data-toggle="collapse" data-target="#collapse-accordion-1"> 108 <p><span>Q.</span>IgM値が0.00となるのはなぜでしょうか?<span>+</span></p> 109 </button> 110 </h5> 111 </div> 112 <div id="collapse-accordion-1" class="collapse" data-parent="#collapse-accordion"> 113 <div class="card-body"> 114 <p><span>A.</span>その時点でIgMが確認できない程小さな値だった際に0.00を示します。</p> 115 </div> 116 </div> 117 </div> 118 <div class="card mb-2"> 119 <div class="card-header" id="headingOne"> 120 <h5 class="mb-0"> 121 <button class="btn btn-link btn-block text-center text-decoration-none" type="button" data-toggle="collapse" data-target="#collapse-accordion-2"> 122 <p><span>Q.</span>基準値(IgM:1.3、IgG:1.2)を少し超えた場合のどのような対応をすればよいでしょうか?<span>+</span></p> 123 </button> 124 </h5> 125 </div> 126 <div id="collapse-accordion-2" class="collapse" data-parent="#collapse-accordion"> 127 <div class="card-body"> 128 <p><span>A.</span>カットオフ値を若干上回った陽性という結果となるため、再テストをお勧めいたします。</p> 129 </div> 130 </div> 131 </div> 132 </div> 133 <footer> 134 <div class="contact"> 135 <h5 class="text-center">ご不明点がございましたら 136 メールにてお問合せください。</h5> 137 </div> 138 <div class="contact contact-btn text-center"> 139 <a href="mailto:faq@medex-lab.com" class="btn btn-danger">お問合せ</a> 140 </div> 141 </footer> 142 143 144 <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script> 145<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script> 146<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.min.js" integrity="sha384-w1Q4orYjBQndcko6MimVbzY0tgp4pWB4lZ7lr30WKz0vr/aWKhXdBNmNb5D92v7s" crossorigin="anonymous"></script> 147 148</body> 149</html> 150 151```CSS 152コード 153```body { 154 font-family: 'Lato', sans-serif; 155 color: #505962; 156 } 157 158 input[type=button] + #clicked::after { 159 content: "-"; 160 } 161/* contact */ 162#contact{ 163 width: 100%; 164} 165.main-img{ 166 background-color: rgb(224, 222, 253); 167 position: relative; 168} 169.main-img img{ 170 width: 70%; 171 height: 70%; 172 opacity: .7; 173} 174.main-title{ 175 position: absolute; 176 top: 45%; 177 right: 0; 178 left: 0; 179 bottom: 0; 180 margin: auto; 181 color: rgb(27, 27, 29); 182 text-shadow: 1px 0px 0px darkslateblue; 183} 184.main-title h1{ 185 letter-spacing: 0.5rem; 186} 187.main-title h2{ 188 letter-spacing: 0.3rem; 189} 190/* panel */ 191.panel-title{ 192 padding-left: 20px; 193 padding: 10px; 194} 195.panel-heading{ 196 margin-top: 60px; 197} 198/* card */ 199.card{ 200 text-align: center; 201} 202.accordion{ 203 margin-top: 20px; 204} 205.card-header p{ 206 color: #505962; 207} 208.card-header span{ 209 color: rgb(16, 78, 211); 210 margin: 0 20px; 211} 212.card-header p:hover{ 213 color: rgb(16, 78, 211); 214} 215.card-body span{ 216 color: rgb(219, 43, 79); 217 margin: 0 20px; 218} 219footer{ 220 margin-top: 50px; 221} 222 223/* contact */ 224.contact{ 225 margin-top: 40px; 226} 227.contact-btn{ 228 margin-bottom: 100px; 229} 230 231footer{ 232 margin-bottom: 100px; 233} 234/* media */ 235 236@media (max-width: 992px) { 237 238} 239 240@media (max-width: 768px){ 241 242} 243 244@media (max-width: 576px) { 245 .panel-heading{ 246 margin-top: 20px; 247 } 248 .main-title h1{ 249 font-size: 24px; 250 } 251 .main-title h2{ 252 font-size: 18px; 253 } 254 .contact{ 255 bottom: 30px; 256 } 257}

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ライブラリに処理を丸投げしている感じですので
spanの中身を空にして、CSSの:afterなどで処理するとよいでしょう

投稿2020/11/09 01:14

yambejp

総合スコア114581

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

hta

2020/11/09 01:20

ありがとうございます! 試してみます!
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだベストアンサーが選ばれていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問