Q&Aのアコーディオンに挑戦

HPに「Q&A」のページを作ってみた。

しかし、表示された悪―ディオンには何か違和感が残る。プラグインを使っているが、マニュアルには注意書きとして作成した日付順でサイトに表示されるとの事・・・
解決方法は面倒だけどあるみたいだ。しかし、それぞれの開発環境で相性があるようだ。

正常な並びで表示できないので、かなり時間をかけて試行覚悟（これだけで数時間も掛かった）してみたが、プラグインと現行Ver.のWord Pressではうまく表示できないみたいだ。
質問項目が「Q1　Q2　Q3・・・」と順に積み重なる仕様のはずだが、作成日を後から再設定するといいらしい、仕様書のような表示とならない・・・

そんな訳で、ネット上の「サルワカ」さんから引用させてもらい、HTMLとCSSで作り直してみる。現在時刻、02：44。朝までに完成するかな？

昨夜は11時過ぎに寝たのだが、どうも気になって夢にまで出てきた。
ベッドの中で考えるより、即！　実践！　である。
それでは・・・

◆参考にさせてもらったHTMLとCSS◆

HTML

<div class="accbox">
  <!--ラベル1-->
    <label for="label1">クリックして表示1</label>
    <input type="checkbox" id="label1" class="cssacc" />
    <div class="accshow">
      <!--ここに隠す中身-->
      <p>
        こんにちは1
      </p>
    </div>
    <!--//ラベル1-->
  <!--ラベル2-->
    <label for="label2">クリックして表示2</label>
    <input type="checkbox" id="label2" class="cssacc" />
    <div class="accshow">
      <!--ここに隠す中身-->
      <p>
        こんにちは2
      </p>
    </div>
    <!--//ラベル2-->
  <!--ラベル3-->
    <label for="label3">クリックして表示3</label>
    <input type="checkbox" id="label3" class="cssacc" />
    <div class="accshow">
      <!--ここに隠す中身-->
      <p>
        こんにちは3
      </p>
    </div>
    <!--//ラベル3-->
  <!--ラベル4-->
    <label for="label4">クリックして表示4</label>
    <input type="checkbox" id="label4" class="cssacc" />
    <div class="accshow">
      <!--ここに隠す中身-->
      <p>
        こんにちは4
      </p>
    </div>
    <!--//ラベル4-->
</div><!--//.accbox-->

表示例

ここに質問の見出しを入力する

CSS

/*ボックス全体*/
.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: 400px;/*最大幅　　　　このテーマで使用する時は 100% に変更した*/
}

/*ラベル*/
.accbox label {
    display: block;
    margin: 1.5px 0;
    padding : 11px 12px;
    color :#2f8fcf;
    font-weight: bold;
    background :#a4cbf3;
    cursor :pointer;
    transition: all 0.5s;
}

/*ラベルホバー時*/
.accbox label:hover {
    background :#85baef;
}

/*チェックは隠す*/
.accbox input {
    display: none;
}

/*中身を非表示にしておく*/
.accbox .accshow {
    height: 0;
    padding: 0;
    overflow: hidden;
    opacity: 0;
    transition: 0.8s;
}

/*クリックで中身表示*/
.cssacc:checked + .accshow {
    height: auto;
    padding: 5px;
    background: #eaeaea;
    opacity: 1;
}