How do I make a multiple-choice "read more" option without using Javascript?

I'm writing an interactive adventure on a site that allows HTML and CSS but not Javascript. I want the end result to be something like "What should you do?" with a "Choice A" and a "Choice B", where if you click on "Choice A" then more text comes up and if you click "Choice B" different text comes up. I looked up a tutorial online and tweaked it as much as I could to get closest to what I want but I don't know where to go from here. I want to know how to make the buttons say different things and how to get them to affect the same paragraph. Hopefully it's possible. Here's what I have so far for the HTML.

<div>
  <input type="checkbox" class="full" id="post-1" />

  <p class="text">
    What should you do?
    <span class="choicea">This is route A.</span>
  </p>

  <label for="post-1" class="read-more-trigger"></label>
</div>

<div>
  <input type="checkbox" class="full" id="post-2" />

  <p class="text">
    What should you do?
    <span class="choiceb">This is route B.</span>
  </p>

  <label for="post-2" class="read-more-trigger"></label>
</div>

And the CSS...

.full {
  display: none;
}

.choicea {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;  
}

.choiceb {
  opacity: 0;
  max-height: 0;
  font-size: 0;
  transition: .25s ease;  
}

.full:checked ~ .text .choicea {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.full:checked ~ .text .choiceb {
  opacity: 1;
  font-size: inherit;
  max-height: 999em;
}

.full ~ .read-more-trigger:before {
  content: 'Choice A';
}

.full:checked ~ .read-more-trigger:before {
  content: 'Pick again';
}

.read-more-trigger {
  cursor: pointer;
  display: inline-block;
  font-size: .9em;
  line-height: 2;
}