css クリック时展开テキスト変更

Posted 2021-05-13

<div class="hidden_box">
    <input type="checkbox" id="labelX"/> <!-- Xを任意の数字に変更 -->
    <label for="labelX">ラベル</label> <!-- Xを上記と同じ数字に変更 -->
    <div class="hidden_show">
        ここに中身
    </div>
</div>

.hidden_box {
    margin: 10px 0;
    padding: 0;
    text-align: center;
}

.hidden_box label {
    border: 1px solid #ddd;
    border-radius: 5px;
    cursor :pointer;
    margin: 0 auto;
    padding: 10px;
    width: 50%;
}

.hidden_box label:hover {
    background: #f5f5f5;
}

.hidden_box label:after {
    content: "を表示";	/* 閉じている状態のときにラベルの後ろに続く文字 */
}

.hidden_box input {
    display: none;
}

.hidden_box .hidden_show {
    height: 0;
    overflow: hidden;
    opacity: 0;
    padding: 0;
    text-align: left;
    transition: 0.5s;
}

.hidden_box input:checked + label:after {
    content: "を非表示";	/* 開いている状態のときにラベルの後ろに続く文字 */
}

.hidden_box input:checked ~ .hidden_show {
    height: auto;
    opacity: 1;
    padding: 10px 0;
}