Accordion w wydaniu css

Szybki tutorial ze zbudowaniem accordiona z użyciem css i html, bez js, skierowany raczej do początkujących - chociaż, jak zauważam, nawet doświadczeni koderzy zapominają o tych "triczkach".

Na początek szkielet, załóżmy, że chcemy 3 panele:

[code=html]

• Idea
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
  

• Idea
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

• Idea
  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

  [/code]

  W celu aktywowania i pokazywania kontenetów z treścią wykorzystamy input type="radio" i własność checked. Gdy input będzie zaznaczony pokażemy przypisany mu kontener z treścią (bądź cokolwiek innego). Używam SCSS.

  

  .m-footer_label {
      font: bold 14px/1 "Quicksand", sans-serif;
      text-transform: uppercase;
      padding: 0 0 5px;
      margin-bottom: 10px;
      border-bottom: 1px solid $cl-green; 
      display: block;
  }
  .m-footer_label + input[type='radio'] {
      display: none;
  }
  .m-footer_label + input[type='radio']:checked + .m-footer_content {
      display: block;
      height: auto;
      &:after {
          content: " - ";
      }
  }

  Przykład online można zobaczyć na Codepen.

  Swoją drogą w podobny sposób można zrobić customowe checkboxy - wykorzystując ~. Czyli (oczywiście dostosowując pod siebie):

  <label for="input"><input name="input" id="input" type="checkbox"><span></span> label</label>

  

  
  input[type="checkbox"] {
      display: none:
  }
  input[type="checkbox"]:checked ~ span {
      background: #000;
  }
  

  Demo: Codepen