アコーディオンのカスタマイズ

Question

以下のようなアコーディオンメニューを作っているのですが

「もっと見る」をクリックした時に「もっと見る」を非表示にし、隠れている中身(Helloの部分)の下に「閉じる」と表示させ、その「閉じる」をクリックすると、再び中身(Helloの部分)が隠れて「もっと見る」が出現するような(デフォルトの状態)アコーディオンが作りたいのですが、どうすれば作れますでしょうか？

jQuelyでもJSでもいいので、何か作れるコードがあればご教授ください。

<div class="accbox">
  

    <label for="label1">もっと見る</label>
    <input type="checkbox" id="label1" class="cssacc" />
    <div class="accshow">
     
     <h1>Hello</h1>
      
    </div>
   
 
</div>

h.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: 400px;/*最大幅*/
}

/*ラベル*/
.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;
}

Comments

[m.ts10806]

今現在、どこまでできていて何が課題でしょうか。複数あるのでしたら細分化して優先度や重要度つけてひとつずつ片付けていくと良いです。
また、調べたこと試したことがあれば追記してください。

Answer 1

こんな感じでどうでしょう？
0. inputを前に持ってきて、labelも隣接セレクタで指定できるようにする
0. .accshowの中に閉じる用のラベルを追加
0. cssで隣接セレクタの調整と、先のlabelをdisplay:none;で消す

<div class="accbox">
  <input type="checkbox" id="label1" class="cssacc" />
  <label for="label1">もっと見る</label>
  <div class="accshow">
    <h1>Hello</h1>
     <label for="label1">もっと見る</label>
  </div>
</div>

.accbox {
    margin: 2em 0;
    padding: 0;
    max-width: 400px;/*最大幅*/
}

/*ラベル*/
.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;
}

/* クリックで先のlabelを消す */
.cssacc:checked + label {
    display: none;
}
/*クリックで中身表示*/
.cssacc:checked + label + .accshow {
    height: auto;
    padding: 5px;
    background: #eaeaea;
    opacity: 1;
}