知識の枝

"All is well"

Bootstrapの折り畳みがDjangoで使えない?

約243日前 2021年5月25日22:56
デジタル
Django CSS

改訂履歴


2021/5/25 投稿

1. 背景


Djangoを使った開発中に覚えたことを備忘録として残します。

今回はBootstrapのCollapseを使用する中で発生したトラブルについて解説します。

トラブルの症状は、
「Collapseで折り畳みが動かない」です。


2. ゴール


Collapseの折り畳みを動作させる。


3. はじめに


Collapseとは直訳で「崩壊する、崩れる」という意味です。
Bootstrapで使用されるCollapseは、要素をトグル形式で表示したり隠したりする際に使います。



本来はトグルに設定したボタンを押すとコンテンツが開閉するのですが、
「ボタンを押しても開閉しない」問題が起きたので解決策を調べました。


4. そもそも原因は?


原因はズバリ
「折り畳みコンテンツのIDに数字を使っていたこと」でした。

Djangoのテンプレート変数を使い下記のように書いていました。
html
{% for each_middle in middles %}

<i class="fa fa-folder-open md-expand" aria-hidden="true" data-bs-toggle="collapse" href="#{{each_middle.id}}" aria-expand="false" aria-controls="{{each_middle.id}}"></i>

<ul class="collapse" id="{{each_middle.id}}">
折り畳みさせたいコンテンツ
</ul>

{% endfor %}
折り畳みをON/OFFするトグル要素に折り畳みのターゲットとなるコンテンツのIDを指定します。

今回は「#{{each_middle.id}}」というIDで指定しました。

{{each_middle.id}}の部分はDjangoのテンプレート変数です。
折り畳みが動作しなかった原因はコレです。


Djangoのモデルのidは標準設定で「整数型の数字」になっています。
今回はこの数字をIDに使用してしまった為、html言語のルールを破っていました。

id属性値は「アルファベット([A-Za-z])で開始し、任意の数のアルファベット、数字、([0-9])、ハイフン(-)、アンダースコア(_)、コロン、(:)、ピリオド(.)のみで記述する必要がある。大文字/小文字を区別する(CS)。この名前は文書中で一意でなければならない(MUST)。」

https://gist.github.com/think49/d8fbcf7f1c743e21bc79bb7d16178cad



原因が分かれば対処は簡単です。
数字の前にアルファベットを書きます。
html
{% for each_middle in middles %}

<i class="fa fa-folder-open md-expand" aria-hidden="true" data-bs-toggle="collapse" href="#task{{each_middle.id}}" aria-expand="false" aria-controls="task{{each_middle.id}}"></i>

<ul class="collapse" id="task{{each_middle.id}}">
折り畳みさせたいコンテンツ
</ul>

{% endfor %}
テンプレート変数の前に「task」のようにアルファベットを追加しました。

「#{{each_middle.id}}」 ⇒ 「#task{{each_middle.id}}」


これで解決です。

そもそもモデルのidを使わないという手もありますね!


5. さいごに


htmlの基本を理解していなかったことが原因でした!
こうやって少しずつ覚えていこうと思います。
お疲れ様でした。