ミギムキ

[CSS] アコーディオン形式のQ&Aリストを設置したい(jQuery不使用)

やりたいこと

サンプルコード

html

<dl class="list_qaa"> <input type="checkbox" id="q01" class="check_open"> <label for="q01"> <dt>質問1</dt> <dd>回答1</dd> </label> <input type="checkbox" id="q02" class="check_open"> <label for="q02"> <dt>質問2</dt> <dd>回答2</dd> </label> <input type="checkbox" id="q03" class="check_open"> <label for="q03"> <dt>質問3</dt> <dd>回答3</dd> </label> </dl>
スポンサー広告

CSS

.list_qaa > input { display: none; } .list_qaa > label { display: block; width: 100%; padding: 0px; margin: 0px; cursor: pointer; } .list_qaa > label > dt, .list_qaa > label > dd { position: relative; font-size: 15px; border-bottom: 1px solid #3388dd; background-color: #fff; } .list_qaa > label > dt:before, .list_qaa > label > dd:before { position: absolute; top: 0px; left: 0.5em; font-size: 2em; } .list_qaa > label > dt:before { content: "Q"; } .list_qaa > label > dd:before { content: "A"; } .list_qaa > label > dt { padding: 1em 1em 1em 3.5em; } .list_qaa > label > dt:after { display: inline-block; position: relative; top: 50%; right: -1em; transform: translateY(-50%) rotate(135deg); width: 0.5em; height: 0.5em; border-top: 2px solid #3388dd; border-right: 2px solid #3388dd; content: ""; } .list_qaa > .check_open:checked + label > dt:after { transform: rotate(-45deg); } .list_qaa > label > dd { padding: 0px 1em 0px 3.5em;; position: relative; z-index: -1; height: 0px; transform: translateY(-2em); visibility: hidden; transition: none; } .list_qaa > .check_open:checked + label > dd { padding: 1em 1em 1em 3.5em;; height: 100%; visibility: visible; transform: translateY(0px); transition: 0.5s; }

項目を増やす場合

<input type="checkbox" id="q04" class="check_open"> <label for="q04"> <dt>質問4</dt> <dd>回答4</dd> </label>
スポンサー広告

仕組み、解説、補足など