Pure CSS Semantic UI Standard Accordion

<input type="radio" id="content1" name="accordion-select">
<input type="radio" id="content2" name="accordion-select">
<input type="radio" id="content3" name="accordion-select">
<div class="ui accordion">
  <label class="title" for="content1">
    <i class="dropdown icon"></i>
    What is a dog?
  </label>
  <div class="content body-1">
    <p>A dog is a type of domesticated animal. Known for its loyalty and faithfulness, it can be found as a welcome guest in many households across the world.</p>
  </div>
  <label class="title" for="content2">
    <i class="dropdown icon"></i>
    What kinds of dogs are there?
  </label>
  <div class="content body-2">
    <p>There are many breeds of dogs. Each breed varies in size and temperament. Owners often select a breed of dog that they find to be compatible with their own lifestyle and desires from a companion.</p>
  </div>
  <label class="title" for="content3">
    <i class="dropdown icon"></i>
    How do you acquire a dog?
  </label>
  <div class="content body-3">
    <p>Three common ways for a prospective owner to acquire a dog is from pet shops, private owners, or shelters.</p>
    <p>A pet shop may be the most convenient way to buy a dog. Buying a dog from a private owner allows you to assess the pedigree and upbringing of your dog before choosing to take it home. Lastly, finding your dog from a shelter, helps give a good home to a dog who may not find one so readily.</p>
  </div>
</div>

input[name="accordion-select"] {
  display: none;
}
label.title {
  cursor: pointer;
  display: block;
}

/* the magic */
#content1:checked ~ .accordion > .body-1,
#content2:checked ~ .accordion > .body-2,
#content3:checked ~ .accordion > .body-3 {
  display: block;
}