html - 纯CSS Accordion 切换

我有个关于我的密码的小问题。正如你所看到的，这是一个纯css和html手风琴，它应该工作。但我想它隐藏的内容不仅当你点击另一个标题，而且当你再次点击同一个标题。
我没有使用任何javascript，但是如果有一种简单的方法来处理这些函数，我也不介意；-）（只要不需要使用jquery）。
提前谢谢！！！

body {
        font-family: Helvetica;
        font-size: 17px;
    }

    h1 {
        text-align: center;
        font-size: 40px;
    }

    label {
        font-weight: 500;

        /* Rahmenlinie (Dicke = 1px) */
        border: 1px solid black;

        /* Überschriften-Box Farbe RGB-Wert */
        background-color: rgb(219, 219, 219);

        border-radius: 3px;
        padding: 7px;
    }

    .pfeil{
        font-size: 25px;
    }

    label:hover {
        cursor: pointer;
    }

    div p{
        color: dimgray;
        font-size: 15px;
        padding-bottom: 5px;
        line-height: 1.5;
    }

    .accordion {
        margin-left: auto;
        margin-right: auto;
        width: 90%;
    }

    .accordion > label {
        display: block;
    }

    .accordion > input {
        display: none;
    }

    .accordion > div {
        max-height: 0;
        overflow: hidden;
    }

    .accordion > input:checked + label + div {
        max-height: 1000px;
    }

<h1>FAQ</h1>

  <div class="accordion">

  <input id="acrd1-item1" name="accordion1" type="radio">
  <label for="acrd1-item1"><span class="pfeil">&#8505;</span> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</label>
  <div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div><br>

  <input id="acrd1-item2" name="accordion1" type="radio">
  <label for="acrd1-item2"><span class="pfeil">&#8505;</span> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</label>
  <div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div><br>

  <input id="acrd1-item3" name="accordion1" type="radio">
  <label for="acrd1-item3"><span class="pfeil">&#8505;</span> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</label>
  <div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div><br>

</div>

最佳答案

用于输入类型radio到checkbox

body {
        font-family: Helvetica;
        font-size: 17px;
    }

    h1 {
        text-align: center;
        font-size: 40px;
    }

    label {
        font-weight: 500;

        /* Rahmenlinie (Dicke = 1px) */
        border: 1px solid black;

        /* Überschriften-Box Farbe RGB-Wert */
        background-color: rgb(219, 219, 219);

        border-radius: 3px;
        padding: 7px;
    }

    .pfeil{
        font-size: 25px;
    }

    label:hover {
        cursor: pointer;
    }

    div p{
        color: dimgray;
        font-size: 15px;
        padding-bottom: 5px;
        line-height: 1.5;
    }

    .accordion {
        margin-left: auto;
        margin-right: auto;
        width: 90%;
    }

    .accordion > label {
        display: block;
    }

    .accordion > input {
        display: none;
    }

    .accordion > div {
        max-height: 0;
        overflow: hidden;
    }

    .accordion > input:checked + label + div {
        max-height: 1000px;
    }

<h1>FAQ</h1>

  <div class="accordion">

  <input id="acrd1-item1" name="accordion1" type="checkbox">
  <label for="acrd1-item1"><span class="pfeil">&#8505;</span> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</label>
  <div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div><br>

  <input id="acrd1-item2" name="accordion1" type="checkbox">
  <label for="acrd1-item2"><span class="pfeil">&#8505;</span> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</label>
  <div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div><br>

  <input id="acrd1-item3" name="accordion1" type="checkbox">
  <label for="acrd1-item3"><span class="pfeil">&#8505;</span> Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat</label>
  <div><p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p></div><br>

</div>