Q&A
BootstrapのCollapse
最近PythonのDjangoでWebアプリを構築しようとしているのですが、
Pythonは少しずつ分かってきたものの、Webページの構築がほぼ初心者なので苦戦しています。
今、Bootstrapのcardを使ってコンテンツの一覧を表示するところまでは何とかできました。
そこで、collapseというのを見つけたのでぜひ使ってみたいと思っています。
実装したい内容としては、
0. 「カードのイメージ」の下にカードボディがあり、そこに詳細を記述してあるのですが長いので普段は隠したい。
- カードフッターにあるボタンで、そのカードボディを開閉したい
- その際、閉じているときはボタンのテキストが「もっと見る▼」、開いているときは「閉じる▲」のようにしたい
というものになります。
今なんとかcollapseを使って開閉するところまでは自力で実装できたのですが、
3.のボタンのテキストを変えるというところが実装できません。
Javascriptに関してはほぼ無学なので、調べながら下記のようなコードを書いてみたのですが、
開いているときも閉じているときも「もっと見る▼」になってしまいます。
javascript
1<script> 2// {{ program.pk }}はpythonの方で動的に生成した値です。 3// IDを指定してelementを取得して、そのクラスの値を見て、テキストを変える。ということをしようとしています... 4var element = document.getElementById("collap{{ program.pk }}") ; 5var a = element.className ; 6if (a == "collapse show" { 7document.getElementById("togglebutton{{ program.pk }}").innerHTML = "閉じる▼" ; 8} else if (a == "collapse") { 9document.getElementById("togglebutton{{ program.pk }}").innerHTML = "もっと見る▼" ; 10} 11</script>
実装したい内容の3.はどのように実現できるか教えていただきたいです。
宜しくお願い致します。
ソースコード(ヘッドタグと該当カード部分)
html
1<! DOCTYPE html> 2<html lang="ja"> 3<head> 4 <meta charset="UTF-8"> 5 <meta name="view-port" content="width=device-width, initial-scale=1"> 6 <link rel="icon" href="/static/favicon.ico"> 7 <link rel="apple-touch-icon" sizes="180x180" href="/static/doors/images/playsdoor_forapple.png"> 8 <link rel="stylesheet" href="/static/doors/css/bootstrap.min.css"> 9 <link rel="stylesheet" href="/static/doors/css/index.css"> 10 11<body> 12 13<div class="row"> 14<div class="col-md-4"> 15 <div class="card mb-4 shadow mb-3 border-primary"> 16 <img カードのイメージ> 17<div class="card-body"> 18 <h5 class="card-title"> 19 <b>『タイトル』</b><br> 20 </h5> 21 <div class="collapse" id="collap{{ program.pk }}"> 22 <p class="card-text"> 23 商品の詳細などの文章が来る。ここを開閉したい。 24 </p> 25 </div> 26</div> 27<div class="card-footer bg-info"> 28 <div class="d-flex justify-content-between align-items-center"> 29 <button type="button" class="btn btn-sm btn-outline-light" data-toggle="collapse" 30 data-target="#collap{{ program.pk }}" aria-expanded="false" aria-controls="collap{{ program.pk }}" id="togglebutton{{ program.pk }}"> 31 <script> 32 上述のスクリプト… 33 </script> 34 </button> 35 </div> 36
どうぞよろしくお願いいたします。
回答1件
0
ベストアンサー
いまのままですとHTMLが読み込まれたときにJavaScriptは1回しか実行されません。
id="togglebutton{{ program.pk }}"で出力されるbuttonに対して、クリックされる度に「いま開いているのか閉じているのか」を判定して内容を書き換えるといった処理にすれば動くと思います。
クリックイベントを捕捉するにはaddEventListenerを利用します。
https://www.sejuku.net/blog/57625
var btn = document.getElementById('ここにID名'); btn.addEventListener('click', function() { // ここで今開いているか閉じているかを判定してHTMLを書き換える });
補足1）記載してもらっているHTMLにbootstrap.min.jsやjqueryが読み込まれていないようですが、お手元のコードには記載されているということで大丈夫ですか？
補足2）addEventListenrはjqueryを使って書くこともできます。
https://www.sejuku.net/blog/41978
投稿2019/09/15 14:07
総合スコア559
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2019/09/15 16:48