アコーディオンメニューを上に向けて表示させたい

アコーディングメニューが下に向かって表示されるのを、逆方向の上に向かって表示されるようにしたいのですが、方法が全く思いつかず困っております。分かる人がいたら、どなたか教えていただけないでしょうか。何卒よろしくお願いします。
↓　　コードは以下のサイトから拝借したものです。
https://saruwakakun.com/html-css/reference/accordion

HTML
1<!doctype html>
2 <html>
3   <head>
4     <meta charset="utf-8">
5       <link rel="stylesheet" href="style8.css">
6    
7     </head>
8<body>
9    <div class="accbox">
10    <label for="label1">クリックして表示1</label>
11    <input type="checkbox" id="label1" class="cssacc" />
12    <div class="accshow">
13      
14      <p>
15        こんにちは1
16      </p>
17    </div>
18</div>
19    
20</body>
21</html>

CSS
1.accbox {
2    margin: 110px 0;
3    padding: 0;
4    max-width: 400px;
5}
6
7
8.accbox label {
9    display: block;
10    margin: 1.5px 0;
11    padding : 11px 12px;
12    color :#2f8fcf;
13    font-weight: bold;
14    background :#a4cbf3;
15    cursor :pointer;
16    transition: all 0.5s;
17}
18
19.accbox input {
20    display: none;
21}
22
23.accbox .accshow {
24    height: 0;
25    padding: 0;
26    overflow: hidden;
27    opacity: 0;
28    transition: 0.8s;
29}
30
31.cssacc:checked + .accshow {
32    height: auto;
33    padding: 5px;
34    background: #eaeaea;
35    opacity: 1;
36}

行動規範の内容に同意します

回答2件

.accshowをクリック領域の前に置いたらどうでしょうか？

    <div class="accshow">

      <p>
        こんにちは1
      </p>
    </div>

    <label for="label1">クリックして表示1</label>
    <input type="checkbox" id="label1" class="cssacc" />

投稿2020/06/22 13:02