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

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

ただいまの
回答率

87.37%

bootstrapのcollapseでの開閉に合わせてボタンの内容も変えたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,353

score 88

BootstrapのCollapse

最近PythonのDjangoでWebアプリを構築しようとしているのですが、
Pythonは少しずつ分かってきたものの、Webページの構築がほぼ初心者なので苦戦しています。

今、Bootstrapのcardを使ってコンテンツの一覧を表示するところまでは何とかできました。
そこで、collapseというのを見つけたのでぜひ使ってみたいと思っています。

実装したい内容としては、

  1. 「カードのイメージ」の下にカードボディがあり、そこに詳細を記述してあるのですが長いので普段は隠したい。
  2. カードフッターにあるボタンで、そのカードボディを開閉したい
  3. その際、閉じているときはボタンのテキストが「もっと見る▼」、開いているときは「閉じる▲」のようにしたい

というものになります。

今なんとかcollapseを使って開閉するところまでは自力で実装できたのですが、
3.のボタンのテキストを変えるというところが実装できません。

Javascriptに関してはほぼ無学なので、調べながら下記のようなコードを書いてみたのですが、
開いているときも閉じているときも「もっと見る▼」になってしまいます。

<script>
// {{ program.pk }}はpythonの方で動的に生成した値です。
// IDを指定してelementを取得して、そのクラスの値を見て、テキストを変える。ということをしようとしています...
var element = document.getElementById("collap{{ program.pk }}") ;
var a = element.className ;
if (a == "collapse show" {
document.getElementById("togglebutton{{ program.pk }}").innerHTML = "閉じる▼" ;
} else if (a == "collapse") {
document.getElementById("togglebutton{{ program.pk }}").innerHTML = "もっと見る▼" ;
}
</script>


実装したい内容の3.はどのように実現できるか教えていただきたいです。
宜しくお願い致します。

ソースコード(ヘッドタグと該当カード部分)

<! DOCTYPE html>
<html lang="ja">
<head>
    <meta charset="UTF-8">
    <meta name="view-port" content="width=device-width, initial-scale=1">
    <link rel="icon" href="/static/favicon.ico">
    <link rel="apple-touch-icon" sizes="180x180" href="/static/doors/images/playsdoor_forapple.png">
    <link rel="stylesheet" href="/static/doors/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/doors/css/index.css">

<body>

<div class="row">
<div class="col-md-4">
  <div class="card mb-4 shadow mb-3 border-primary">
    <img カードのイメージ>
<div class="card-body">
  <h5 class="card-title">
    <b>『タイトル』</b><br>
  </h5>
  <div class="collapse" id="collap{{ program.pk }}">
    <p class="card-text">
      商品の詳細などの文章が来る。ここを開閉したい。
    </p>
  </div>
</div>
<div class="card-footer bg-info">
  <div class="d-flex justify-content-between align-items-center">
    <button type="button" class="btn btn-sm btn-outline-light" data-toggle="collapse"
                                data-target="#collap{{ program.pk }}" aria-expanded="false" aria-controls="collap{{ program.pk }}" id="togglebutton{{ program.pk }}">
      <script>
        上述のスクリプト…
      </script>
    </button>
  </div>

どうぞよろしくお願いいたします。

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

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 過去に投稿した質問と同じ内容の質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+2

いまのままですと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/16 01:48

    ありがとうございます!教えていただいた```addEventListener```で実現できました!
    >補足1 どちらもbodyの下部にて読み込んでいました。ありがとうございます。

    キャンセル

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

  • ただいまの回答率 87.37%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

関連した質問

同じタグがついた質問を見る