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

- Janmeister

---

你好，你可以尝试在复选框上更改你的单选按钮，因为你不能在没有js的情况下取消选择单选按钮。但是，如果你想在一组中只选择一个复选框，你必须使用js示例：https://dev59.com/fWkw5IYBdhLWcg3ws8tj - Gregorie

Answer 1

将输入类型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>

- Lalji Tadhani