JSを使うより軽量なため、シンプルなタブ切り替えなら、HTMLとCSSだけで実装したい。
ラジオボタンで表示・非表示
- HTMLの構成は、① ラジオボタン ＋ ② ラベル（タブ） ＋ ③ 表示させたい内容部分 の3セット。
- ラジオボタンは1つのみ選択可能なので、他のタブクリックで表示を切り替えたい時に使う。
| No. | 動作の流れ |
|---|---|
| 1 | ラベルをクリックしたら、ラジオボタンがchecked状態になる |
| 2 | checked状態のラジオボタンの次の次の要素を表示にする |
| 3 | 他のラベルをクリックしたら、そのラジオボタンにchecked状態が移る |
| 4 | 内容要素を一旦全部非表示にする |
| 5 | 改めて、checked状態のラジオボタンの次の次の要素を表示にする |
※ ラベルのfor属性に、ラジオボタンのid名を指定することで、ラベルクリックで所望のラジオボタンがchecked状態になる。
例1）inputの直後に表示内容を置く
表示したい内容をinputの直後に置く場合(HTML)
<divclass="area"><inputtype="radio"name="tab_name"id="tab1"checked><labelclass="tab_class"for="tab1">タブ1</label><divclass="content_class">コンテンツ1</div><inputtype="radio"name="tab_name"id="tab2"><labelclass="tab_class"for="tab2">タブ2</label><divclass="content_class">コンテンツ2</div><inputtype="radio"name="tab_name"id="tab3"><labelclass="tab_class"for="tab3">タブ3</label><divclass="content_class">コンテンツ3</div></div>css
.area{width:500px;margin:auto;flex-wrap:wrap;display:flex;}.tab_class{width:calc(100%/3);height:50px;line-height:50px;text-align:center;display:block;float:left;order:-1;}input[name="tab_name"]{display:none;}input:checked+.tab_class{color:blue;}.content_class{display:none;width:100%;}input:checked+.tab_class+.content_class{display:block;}例2）inputの直後に表示内容を置かない
表示したい内容をinputの直後に置かない場合(HTML)
<divclass="area"><inputid="tab1"type="radio"name="tab_name"checked><labelclass="tab_class"for="tab1">タブ1</label><inputid="tab2"type="radio"name="tab_name"><labelclass="tab_class"for="tab2">タブ2</label><inputid="tab3"type="radio"name="tab_name"><labelclass="tab_class"for="tab3">タブ3</label><divclass="content_class"id="content1_class">コンテンツ1</div><divclass="content_class"id="content2_class">コンテンツ2</div><divclass="content_class"id="content3_class">コンテンツ3</div></div>css
/* 全体 */.area{width:1000px;}/* タブ */.tab_class{width:calc(100%/3);height:50px;line-height:50px;text-align:center;display:block;float:left;text-align:center;transition:all0.2sease;}.tab_class:hover{opacity:0.75;}/* ラジオボタンを非表示に */input[name="tab_name"]{display:none;}/* 内容部分 */.content_class{display:none;clear:both;/* floatを解除 */overflow:hidden;}/* 選択されたタブ */.areainput:checked+.tab_class{color:gray;}/* 選択されたタブの内容のみを表示 */#tab1:checked~#content1_class,#tab2:checked~#content2_class,#tab3:checked~#content3_class{display:block;}チェックボックスで表示・非表示
- ① チェックボックス ＋ ② ラベル（タブ） ＋ ③ 表示させたい内容部分 の3セット。
- チェックボックスは複数選択可能なので、タブクリックで表示 ⇄ 非表示させたい時に使う。
- 例）アコーディオンメニュー
例1）
HTML
<divclass="area"><labelfor="label1">タブ1</label><inputtype="checkbox"id="label1"/><divclass="content_class">コンテンツ1</div><labelfor="label2">タブ2</label><inputtype="checkbox"id="label2"/><divclass="content_class">コンテンツ2</div><labelfor="label3">タブ3</label><inputtype="checkbox"id="label3"/><divclass="content_class">コンテンツ3</div></div>css
/* ラベルにアイコン追加 */.arealabel:before{display:inline-block;content:'\f078';transition:0.2s;}/* ボタンホバー */.arealabel:hover{background:gray;}/* チェックボックスは非表示に */.areainput{display:none;}/* 中身を非表示に */.area.content_class{overflow:hidden;opacity:0;transition:0.8s;}/* クリックで内容部分を表示 */.areainput:checked~.content_class{height:auto;opacity:1;}/* アイコンを切り替えとか */.areainput:checked~label:before{content:'\f00d';/* 別のアイコンに変更 */transform:rotate(360deg);/* 1回転 */}例2）
blade
<div><div><p>タイトル1</p><div>{{Form::label('label1','▼ 詳細',['class'=>'tab_class'])}}</div></div>{{Form::checkbox('tab_name',$array,null,['id'=>'label1'])}}<divclass="content_class">コンテンツ1</div></div><div><div><p>タイトル2</p><div>{{Form::label('label2','▼ 詳細',['class'=>'tab_class'])}}</div></div>{{Form::checkbox('tab_name',$array,null,['id'=>'label2'])}}<divclass="content_class">コンテンツ2</div></div>内容部分の表示/非表示
input[name="tab_name"],.content_class{display:none;}input[name="tab_name"]:checked+.content_class{display:block;}.tab_class:hover{color:black;}