纯CSS手风琴切换

Question

我对我的小代码有一点疑问。正如您所看到的那样，它是纯粹的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>

Answer 1

用于将radio输入到checkbox

＆＃13;

＆＃13;

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;
    }

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;