[JSWolf]

Originally Posted by Slevin#7

I don't know whether this specific solution works with Kindle formats, so you would have to try.

This approach won't split the question-answer segment into two sections, but will show the answer directly under each question. It relies on a checkbox and its :checked pseudo selector to toggle the visibilty of the answer:

HTML

<div class="question">
  <p>Is the sky blue?</p>

  <label for="checkbox-answer_1" class="toggle-answer">
    Click here to show/hide the answer.   
  </label>

  <!-- We have to place the checkbox outside the label element
         since otherwise targeting .answer wouldn't be possible.
         This requires an id to link the label to the checkbox. -->

  <input type="checkbox" id="checkbox-answer_1" class="checkbox-answer"/>

  <div class="answer">
    <p>Yes, the sky is blue.</p>
  </div>
</div>

CSS

.question {
  padding: 0.1em 1em;
  background-color: #eee;
}

.answer {
  visibility: hidden;
  background-color: #ddd;
}

.toggle-answer {
  cursor: pointer;
  /* prevent accidentally selecting */
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;   
}

/* hide the checkbox, not a must for functionality */
.checkbox-answer {
  position: absolute;
  top: -1000px;
  left: -6000px;
  width: 0;
  height: 0;
  opacity: 0;
}

.checkbox-answer:checked ~ .answer {
  visibility: visible;
}

Your toggle-answer CSS is all wrong. None of the code is ePub compliant. Also with your checkbox-answer CSS, your PX are way too large. If you don't know the screen size that's going to be used, thjen you have to code as if it's a small cell phone screen to a large screen.