表示・非表示の切り替えを異なる内容で複数個所行いたい

前提・実現したいこと

表示・非表示の切り替えを異なる内容で複数個所行いたいです。
具体的には
ABC

GHI

LMN
をボタンを押したら
ABC
DEF
GHI
JKL
LMN
となるような感じです。

表示・非表示の変更はできてもそれを１つのボタンで複数箇所行うことができません。
どのようにしたらいいのでしょうか。

該当のソースコード

html
1<div class="box">
2    <label for="label">表示</label>
3    <input type="checkbox" id="label"/>
4    <div class="show">   
5      	<p>abc</p>
6    </div>
7<div class="show">   
8      	<p>def</p>
9    </div>
10<div class="show">   
11      	<p>ghi</p>
12    </div>
13</div>

css
1.box input {
2    display: none;
3}
4.box .show {
5    height: 0;
6    padding: 0;
7    overflow: hidden;
8    opacity: 0;
9    transition: 0.8s;
10}
11.box input:checked .hidden_show {
12    padding: 10px 0;
13    height: auto;
14    opacity: 1;
15}

nekora

2021/07/04 18:12

こちら、動作させるにはscriptも必要ではないかと思われるのですが、ご提示いただけていません。質問は編集、追記できますので、動いてないコードでかまいませんので現状のscriptをご提示いただけますでしょうか。回答したくてもこのままでは回答できません。

行動規範の内容に同意します

回答1件

ベストアンサー

こういうことでしょうか？

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <meta name="viewport" content="width=device-width, initial-scale=1.0">
7    <title>Document</title>
8    <style>
9
10        .toggle {
11            opacity: 0;
12        }
13
14        input:checked ~ .toggle{
15            opacity: 1;
16        }
17
18    </style>
19</head>
20
21<body>
22    <label for="label">表示</label>
23    <input type="checkbox" id="label">
24    <p>ABC</p>
25    <p class="toggle">DEF</p>
26    <p>GHI</p>
27    <p class="toggle">JKL</p>
28    <p>MNO</p>
29</body>
30
31</html>