纯 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

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>

纯 CSS 手风琴切换

Pure CSS accordion toggle

html

css

accordion

toggle