

ボタンを押すとアコーディオンメニューが開くようにプログラムを組んだつもりなのですが、うまく動きません。

[code]

    .menu {
        max-width: 600px;
    }
    
    .menu a {
        display: block;
        padding: 15px;
        text-decoration: none;
        color: #000;
    }
    
    label {
        display: block;
        margin: 0 0 4px 0;
        padding : 15px;
        line-height: 1;
        color :#fff;
        background : white;
        cursor :pointer;
    }
    
    input {
        display: none;
    }
    
    .menu ul {
        margin: 0;
        padding: 0;
        background :white;
        list-style: none;
    }
    
    .menu li {
        height: 0;
        overflow: hidden;
        -webkit-transition: all 0.5s;
        -moz-transition: all 0.5s;
        -ms-transition: all 0.5s;
        -o-transition: all 0.5s;
        transition: all 0.5s;
    }
    
    #menu_bar01:checked ~ #links01 li{
        height: 54px;
        opacity: 1;
    }
    
    
    *,
    *:before,
    *:after {
      -webkit-box-sizing: inherit;
      box-sizing: inherit;
    }
    
    html {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 62.5%;
    }
    
    /* 背景用*/
    body {
      padding: -5px;
    }
    
    .btn,
    a.btn,
    button.btn {
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.5;
      position: relative;
      display: inline-block;
      padding: 1rem 4rem;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      text-align: center;
      vertical-align: middle;
      text-decoration: none;
      letter-spacing: 0.1em;
      color: #212529;
      border-radius: 0.5rem;
      margin: 10px 20px 30px 40px; /* 外側の時計回りの余白 */
    }
    
    a.btn-border-shadow5 {
      padding: calc(1.5rem - 12px) 3rem 1.5rem;
    
      background: red;
    }
    
    a.btn-border-shadow5:before {
      position: absolute;
      top: -6px;
      left: -6px;
    
      width: 100%;
      height: 100%;
    
      content: "";
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
    
      border: 3px solid #000;
      border-radius: 0.5rem;
    }
    
    a.btn-border-shadow5:hover {
      padding: calc(1.5rem - 6px) 3rem;
    }
    
    a.btn-border-shadow5:hover:before {
      top: 0;
      left: 0;
    }
    
    *,
    *:before,
    *:after {
      -webkit-box-sizing: inherit;
      box-sizing: inherit;
    }
    
    html {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 62.5%;
    }
    
    /* 背景用*/
    body {
      padding: -5px;
    }
    
    .btn,
    a.btn,
    button.btn {
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.5;
      position: relative;
      display: inline-block;
      padding: 1rem 4rem;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      text-align: center;
      vertical-align: middle;
      text-decoration: none;
      letter-spacing: 0.1em;
      color: #212529;
      border-radius: 0.5rem;
      margin: 10px 20px 30px 40px; /* 外側の時計回りの余白 */
    }
    
    a.btn-border-shadow6 {
      padding: calc(1.5rem - 12px) 3rem 1.5rem;
    
      background: blue;
    }
    
    a.btn-border-shadow6:before {
      position: absolute;
      top: -6px;
      left: -6px;
    
      width: 100%;
      height: 100%;
    
      content: "";
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
    
      border: 3px solid #000;
      border-radius: 0.5rem;
    }
    
    a.btn-border-shadow6:hover {
      padding: calc(1.5rem - 6px) 3rem;
    }
    
    a.btn-border-shadow6:hover:before {
      top: 0;
      left: 0;
    }
    
    *,
    *:before,
    *:after {
      -webkit-box-sizing: inherit;
      box-sizing: inherit;
    }
    
    html {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 62.5%;
    }
    
    /* 背景用*/
    body {
      padding: -5px;
    }
    
    .btn,
    a.btn,
    button.btn {
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.5;
      position: relative;
      display: inline-block;
      padding: 1rem 4rem;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      text-align: center;
      vertical-align: middle;
      text-decoration: none;
      letter-spacing: 0.1em;
      color: #212529;
      border-radius: 0.5rem;
      margin: 10px 20px 30px 40px; /* 外側の時計回りの余白 */
    }
    
    a.btn-border-shadow7 {
      padding: calc(1.5rem - 12px) 3rem 1.5rem;
    
      background: green;
    }
    
    a.btn-border-shadow7:before {
      position: absolute;
      top: -6px;
      left: -6px;
    
      width: 100%;
      height: 100%;
    
      content: "";
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
    
      border: 3px solid #000;
      border-radius: 0.5rem;
    }
    
    a.btn-border-shadow7:hover {
      padding: calc(1.5rem - 6px) 3rem;
    }
    
    a.btn-border-shadow7:hover:before {
      top: 0;
      left: 0;
    }
    
    *,
    *:before,
    *:after {
      -webkit-box-sizing: inherit;
      box-sizing: inherit;
    }
    
    html {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 62.5%;
    }
    
    /* 背景用*/
    body {
      padding: -5px;
    }
    
    .btn,
    a.btn,
    button.btn {
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.5;
      position: relative;
      display: inline-block;
      padding: 1rem 4rem;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      text-align: center;
      vertical-align: middle;
      text-decoration: none;
      letter-spacing: 0.1em;
      color: #212529;
      border-radius: 0.5rem;
      margin: 10px 20px 30px 40px; /* 外側の時計回りの余白 */
    }
    
    a.btn-border-shadow8 {
      padding: calc(1.5rem - 12px) 3rem 1.5rem;
    
      background: yellow;
    }
    
    a.btn-border-shadow8:before {
      position: absolute;
      top: -6px;
      left: -6px;
    
      width: 100%;
      height: 100%;
    
      content: "";
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
    
      border: 3px solid #000;
      border-radius: 0.5rem;
    }
    
    a.btn-border-shadow8:hover {
      padding: calc(1.5rem - 6px) 3rem;
    }
    
    a.btn-border-shadow8:hover:before {
      top: 0;
      left: 0;
    }
    
    *,
    *:before,
    *:after {
      -webkit-box-sizing: inherit;
      box-sizing: inherit;
    }
    
    html {
      -webkit-box-sizing: border-box;
      box-sizing: border-box;
      font-size: 62.5%;
    }
    
    /* 背景用*/
    body {
      padding: -5px;
    }
    
    .btn,
    a.btn,
    button.btn {
      font-size: 1.6rem;
      font-weight: 700;
      line-height: 1.5;
      position: relative;
      display: inline-block;
      padding: 1rem 4rem;
      cursor: pointer;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
      -webkit-transition: all 0.3s;
      transition: all 0.3s;
      text-align: center;
      vertical-align: middle;
      text-decoration: none;
      letter-spacing: 0.1em;
      color: #212529;
      border-radius: 0.5rem;
      margin: 10px 20px 30px 40px; /* 外側の時計回りの余白 */
    }
    
    a.btn-border-shadow {
      padding: calc(1.5rem - 12px) 3rem 1.5rem;
    
      background: #ffff00;
    }
    
    a.btn-border-shadow:before {
      position: absolute;
      top: -6px;
      left: -6px;
    
      width: 100%;
      height: 100%;
    
      content: "";
      -webkit-transition: all 0.3s ease;
      transition: all 0.3s ease;
    
      border: 3px solid #000;
      border-radius: 0.5rem;
    }
    
    a.btn-border-shadow:hover {
      padding: calc(1.5rem - 6px) 3rem;
    }
    
    a.btn-border-shadow:hover:before {
      top: 0;
      left: 0;
    }
[/code]

[code]

    <td>
         <label for="menu_bar01"><a href="" class="btn btn-border-shadow">小学校</a></label>
      </td>
      <input type="checkbox" id="menu_bar01" />
      <ul id="links01">
        <divclass="btn-wrap5"><a href="" class="btn btn-border-shadow5">国語</a></div>
        <divclass="btn-wrap6"><a href="" class="btn btn-border-shadow6">算数</a></div>
        <divclass="btn-wrap7"><a href="" class="btn btn-border-shadow7">理科</a></div>
        <divclass="btn-wrap8"><a href="" class="btn btn-border-shadow8">社会</a></div>
      </ul>
     </div>
    </div>
[/code]


CC BY-SA 4.0
2022-04-09T11:50:00.540
88240
2022-04-14T11:21:39.577
2022-04-11T23:55:44.833
3060
48799
question
html css
アコーディオンメニューが意図した通り動作しない


レイアウトが違うけど、ボタンのリンクがアコーディオンに見えますね。

試しにアコーディオンメニュー書いてみました。

[code]

    .accordion {
        max-width: 360px;
        margin: 20;
        padding: 10;
    }
    .accordion a {
        display: block;
        padding: 10px;
        text-decoration: none;
        color: #000000;
        line-height: 1;
    }
    .accordion label {
        display: block;
        position: relative;
        margin: 0 0 2px 0;
        padding: 12px;
        line-height: 1;
        color: black;
        background: yellow;
        cursor: pointer;
    }
    .accordion label::before {
        position: absolute;
        content: '+';
        color: black;
        right: 0.5em;
        top: 25%;
    }
    .accordion input {
        display: none;
    }
    .accordion ul {
        margin: 0;
        padding: 0;
        background: #f4f4f4;
        list-style: none;
    }
    .accordion li {
        overflow-y: hidden;
        max-height: 0;
        transition: all 0.5s;
    }
    
    #accordion_bar1:checked ~ #link1 li,
    #accordion_bar2:checked ~ #link2 li {
        max-height: 46px;
        opacity: 1;
    }
[/code]

[code]

    <link rel="stylesheet" href="accordion.css">
    <div class="accordion">
    <label for="accordion_bar1">小学校</label>
    <input type="checkbox" name="checkbox" id="accordion_bar1" class="accordion" />
    <ul id="link1">
        <li><a href="">国語</a></li>
        <li><a href="">算数</a></li>
        <li><a href="">理科</a></li>
        <li><a href="">社会</a></li>
    </ul>
    <label for="accordion_bar2">学習塾</label>
    <input type="checkbox" name="checkbox" id="accordion_bar2" class="accordion" />
    <ul id="link2">
        <li><a href="">国語</a></li>
        <li><a href="">算数</a></li>
        <li><a href="">理科</a></li>
        <li><a href="">社会</a></li>
    </ul>
    </div>
[/code]


CC BY-SA 4.0
2022-04-09T22:59:10.060
88247
2022-04-14T11:21:39.577
2022-04-14T11:21:39.577
3060
50767
88240
answer