【コピペでOK】CSSだけでQ&Aプルダウンを作ってみよう！

CSSだけでもする〜っとした動きは作れます。今回は質問欄を押したら、解答欄がスルスル〜っと出てくるようなものをCSSだけで作ってみます！

完成見本

https://　tsuyu0102.github.io/css-sample/faq-accordion/index.html

▼1200px幅

▼601px幅

▼600px幅（レスポンシブ対応にしました）

html

---

<div class="container">

   <h2>Q&A</h2>

   <div class="qa-container">

    <input type="checkbox" id="q01" />

    <label for="q01">Q01：今日注文したらいつ届きますか？</label>

    <p>ご注文確定から５日前後となります。</p>

   </div>

   <div class="qa-container">

    <input type="checkbox" id="q02" />

    <label for="q02">Q02：送料はかかりますか？</label>

    <p>全国一律送料無料となっております。<br />※ただし購入商品が大型、またお届け先が沖縄及び離島・その他一部地域では追加料金を加算される場合がございます。また一部の商品に限り送料をいただく場合がございます。</p>

   </div>

   <div class="qa-container">

    <input type="checkbox" id="q03" />

    <label for="q03">Q03：支払い方法は何がありますか？</label>

    <p>

     ・代金引換 （お買い上げ金額に応じて、別途代引手数料がかかります。）<br />

     ・銀行振込 （ご入金確認後の発送になります）<br />

     ・各種クレジットカード<br />でお支払いいただけます。

    </p>

   </div>

  </div>

---

⭐️質問項目を増やしたかったら、div.qa-containerをまるっとコピペしてください。そしたら、inputの中のidとlabelのforの中を他とは違う文字に揃えて変更してください。

⭐️labelタグ内に質問を書き、pタグ内にクリックした後に表示させる回答を書きます。

CSS

---

<style>

   body {

    background: skyblue;

   }

   .container {

    position: relative;

    background: #fff;

    margin: 3rem;

    padding: 2rem 4rem;

   }

   .container h2 {

    text-align: center;

   }

   .qa-container {

    text-align: justify;

    margin-bottom: 0.5rem;

   }

   .qa-container label {

    display: block;

    position: relative;

    background: #f5f5f5;

    padding: 1rem 2.5rem 1rem 0.5rem;

    cursor: pointer;

   }

   .qa-container label:after {

    content: '';

    display: block;

    width: 0.5rem;

    height: 0.5rem;

    border-right: solid 2px #ccc;

    border-bottom: solid 2px #ccc;

    transform: rotate(45deg) translate(100%, 100%);

    position: absolute;

    top: 0;

    right: 0;

    margin-top: 0.5rem;

    margin-right: 1rem;

   }

   .qa-container input:checked ~ label:after {

    transform: rotate(-135deg) translate(-100%, -100%);

    margin-top: 0.75rem;

   }

   .qa-container input {

    display: none;

   }

   .qa-container p {

    height: 0px;

    opacity: 0;

    transition: opacity 0.3s ease-in-out, height 0.5s ease-in-out, margin 0.5s ease-in-out;

    margin: 0 0.5rem;

   }

   .qa-container input:checked ~ p {

    height: 150px;

    opacity: 1;

    transition: opacity 0.3s 0.2s ease-in-out, height 0.3s ease-in-out;

    margin: 1rem 0.5rem;

   }

   ＠media (max-width: 600px) {

    .container {

     margin: 0;

     padding: 2rem 1rem;

    }

    .qa-container input:checked ~ p {

     height: 200px;

    }

   }

  </style>

---

⭐️＠は半角のアットマークに差し替えてください。

⭐️label:afterに右側の山形アイコン[ ^ }を書いています。

【参考サイト】

【CSS3】transition でプロパティを複数指定する書き方

https://　becolomochi.hatenablog.com/entry/2017/12/27/160330

【CSS】 子孫セレクタ、子セレクタ、隣接、複数など忘れがちなセレクタをまとめました＜前編＞

https://　takayamato.com/selector-01/

---

いかがでしたか？もしよかったら使ってみてくださいね🌷