JSを使うより軽量なため、シンプルなタブ切り替えなら、HTMLとCSSだけで実装したい。
ラジオボタンで表示・非表示
- HTMLの構成は、① ラジオボタン ＋ ② ラベル（タブ） ＋ ③ 表示させたい内容部分 の3セット。
- ラジオボタンは1つのみ選択可能なので、他のタブクリックで表示を切り替えたい時に使う。
| No. | 動作の流れ |
|---|---|
| 1 | ラベルをクリックしたら、ラジオボタンがchecked状態になる |
| 2 | checked状態のラジオボタンの次の次の要素を表示にする |
| 3 | 他のラベルをクリックしたら、そのラジオボタンにchecked状態が移る |
| 4 | 内容要素を一旦全部非表示にする |
| 5 | 改めて、checked状態のラジオボタンの次の次の要素を表示にする |
※ ラベルのfor属性に、ラジオボタンのid名を指定することで、ラベルクリックで所望のラジオボタンがchecked状態になる。
例1）inputの直後に表示内容を置く
表示したい内容をinputの直後に置く場合(HTML)
<div class="area">
<input type="radio" name="tab_name" id="tab1" checked>
<label class="tab_class" for="tab1">タブ1</label>
<div class="content_class">コンテンツ1</div>
<input type="radio" name="tab_name" id="tab2" >
<label class="tab_class" for="tab2">タブ2</label>
<div class="content_class">コンテンツ2</div>
<input type="radio" name="tab_name" id="tab3" >
<label class="tab_class" for="tab3">タブ3</label>
<div class="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)
<div class="area">
<input id="tab1" type="radio" name="tab_name" checked>
<label class="tab_class" for="tab1">タブ1</label>
<input id="tab2" type="radio" name="tab_name">
<label class="tab_class" for="tab2">タブ2</label>
<input id="tab3" type="radio" name="tab_name">
<label class="tab_class" for="tab3">タブ3</label>
<div class="content_class" id="content1_class">コンテンツ1</div>
<div class="content_class" id="content2_class">コンテンツ2</div>
<div class="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: all 0.2s ease;
}
.tab_class:hover {
opacity: 0.75;
}
/* ラジオボタンを非表示に */
input[name="tab_name"] {
display: none;
}
/* 内容部分 */
.content_class {
display: none;
clear: both; /* floatを解除 */
overflow: hidden;
}
/* 選択されたタブ */
.area input:checked + .tab_class {
color: gray;
}
/* 選択されたタブの内容のみを表示 */
#tab1:checked ~ #content1_class,
#tab2:checked ~ #content2_class,
#tab3:checked ~ #content3_class {
display: block;
}
チェックボックスで表示・非表示
- ① チェックボックス ＋ ② ラベル（タブ） ＋ ③ 表示させたい内容部分 の3セット。
- チェックボックスは複数選択可能なので、タブクリックで表示 ⇄ 非表示させたい時に使う。
- 例）アコーディオンメニュー
例1）
HTML
<div class="area">
<label for="label1">タブ1</label>
<input type="checkbox" id="label1"/>
<div class="content_class">コンテンツ1</div>
<label for="label2">タブ2</label>
<input type="checkbox" id="label2"/>
<div class="content_class">コンテンツ2</div>
<label for="label3">タブ3</label>
<input type="checkbox" id="label3"/>
<div class="content_class">コンテンツ3</div>
</div>
css
/* ラベルにアイコン追加 */
.area label:before {
display: inline-block;
content: '\f078';
transition: 0.2s;
}
/* ボタンホバー */
.area label:hover {
background: gray;
}
/* チェックボックスは非表示に */
.area input {
display: none;
}
/* 中身を非表示に */
.area .content_class {
overflow: hidden;
opacity: 0;
transition: 0.8s;
}
/* クリックで内容部分を表示 */
.area input:checked ~ .content_class {
height: auto;
opacity: 1;
}
/* アイコンを切り替えとか */
.area input: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']) }}
<div class="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']) }}
<div class="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;
}