Take a look at the following code:
.reveal-if-active {
opacity: 0;
max-height: 0;
overflow: hidden;
}
input[type="radio"]:checked~.reveal-if-active,
input[type="checkbox"]:checked~.reveal-if-active {
opacity: 1;
max-height: 100px;
/* little bit of a magic number :( */
overflow: visible;
}<div>
<input type="radio" name="choice-animals" id="choice-animals-dogs">
<label for="choice-animals-dogs">I like dogs more</label>
<div class="reveal-if-active">
<input type="text" name="dog" placeholder="why?">
</div>
</div>
<div>
<input type="radio" name="choice-animals" id="choice-animals-cats">
<label for="choice-animals-cats">I like cats more</label>
<div class="reveal-if-active">
<input type="text" name="cat" placeholder="why?">
</div>
</div>Upon running this code, you will notice that text boxes are revealed by clicking on radio buttons situated to the left side of the labels attached to those buttons.
I attempted using tables to organize the radio buttons and display the hidden text boxes next to the labels, but unfortunately, it did not work as expected. Using a table seems to have disabled the popups.
If anyone has any suggestions or guidance on how to tackle this issue, I would greatly appreciate it!