アコーディオンをつくる - Bootstrapのチュートリアル

このレッスンでは折りたためる カードを組み合わせて アコーディオンのインターフェイスに してみます。 今折りたためるカードがすでに できあがっているんですけれども カードは基本通りに作った後 折りたためるようにするには この項目タイトルですね これで折りたためるんですけれども その場合には、まずこの タイトル部分なんですけれども a 要素になっています。そこに data-toggle として collapse という値を設定します。 その上で折りたたむのは この div 要素の中に入っている 本文ですね それに対しては class として collapse と show という class を設定します。その上でこの 折りたたむ div 要素には id を指定するんですが、この id を タイトルの a 要素の href に # 付きで、いげたの id 名ということで指定してあげると タイトルをクリックした時に 本文を折りたたむ あるいはまた広げる ということができます。 確認してみましょう。カードの項目の 下に本文が開いていますけれども 項目タイトルをクリックすると たたんで、またクリックすると 広がると。ちょっとした アニメーションも付いています。 このカードを複数組み合わせて 連携すれば、アコーディオンの インターフェイスの動きになりますね。 ということですので、まずは 今一個しかカードがありますけれども これを複数作るということにして このカード一つをまず インデントとして全体を もう一つ div 要素で括ります。 id をつけておきます。 accordion という id をつけました。 これ id は別に 決まっているわけではありません。 id を指定すればいいです。 そして 閉じると。そうしたらこの カードですね とりあえずもう一枚作ってみましょう。 コピーして、そして ペーストと。そしてここは項目２と。 あと id は 同じ名前が２つあったりしませんので item-2。そしてこれは a 要素の href と連携しなければいけませんので ここも２にします。 ということで、とりあえず ２枚にしました。 そして div 要素の中に２つを 含めましたけれども まだ連携はできていません。 ここの動きを確認しておきましょう。 カードが２つ表示されました。…