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;
}