修改外部内容<div>和<select>, 但没有 JavaScript

Question

I have an HTML page which looks something like this,

<select id="selectMe">
  <option value="option1">Question 1</option>
  <option value="option2">Question 2</option>
  <option value="option3">Question 3</option>
</select>
<div id="option1">Answer 1</div>
<div id="option2">Answer 2</div>
<div id="option3">Answer 3</div>

I want to use the <select> element to choose which answer <div> to show. Unfortunately, I cannot use any JavaScript and must do this with HTML / CSS only.

Also note I'm not hell-bent on using <select> if some other form elements will make this easier. But not using any JavaScript is a hard restriction for me.

Answer 1

I mean there is one-way (not totally proud of it) but using radio buttons help us to track checked state using the :checked pseudo-selector. We can use the same to map from question1 to option1 and so on.

 .options{ display:none; } #question1:checked ~ #option1, #question2:checked ~ #option2, #question3:checked ~ #option3{ display:block; }

 <input type="radio" name="questions" id="question1" checked/> <label for="question1">Quesion 1</label> <input type="radio" name="questions" id="question2"/> <label for="question2">Question 2</label> <input type="radio" name="questions" id="question3"/> <label for="question3">Question 3</label> <div id="option1" class="options">Answer 1</div> <div id="option2" class="options">Answer 2</div> <div id="option3" class="options">Answer 3</div>

Answer 2

I cannot think of a way to hide elements without JS, however, you could use page anchors.

1. Make the divs match the height of the screen
2. Use anchors to link to the divs on page
3. Fix the nav to the top of the screen so that on scrolling it doesn't disappear
4. Disable the user scrolling which would make it appear to hide/show the divs.

Hope this helps.

 <div class="sticky"> <a href="#option1">Question 1</a> <a href="#option2">Question 2</a> <a href="#option3">Question 3</a> </div> <div id="option1" class="full-height blue">Answer 1</div> <div id="option2" class="full-height green">Answer 2</div> <div id="option3" class="full-height red">Answer 3</div> <style> body { overflow: hidden; margin: 0; } .sticky { position: fixed; background: white; } .full-height { color: white; display: flex; justify-content: center; align-items: center; height: 100vh; } .blue { background: blue; } .green { background: green; } .red { background: red; } </style>

Answer 3

I think you can use the CSS CheckBox Hack . You will however need to build your own <select> because unfortunately it is not possible to put HTML tags inside an <option> .

The basic idea is outlined below. On the linked page you can also find an example for how to hide and show content.

 .visually-hidden { position: absolute; left: -100vw; } .dropdown-header::after { content: "> Options (Click to expand)"; } #option1:checked ~ .dropdown-header::after { content: "Question 1"; } #option2:checked ~ .dropdown-header::after { content: "Question 2"; } #option3:checked ~ .dropdown-header::after { content: "Question 3"; } .answer::after { content: ""; } #option1:checked ~ .answer::after { content: "Answer 1"; } #option2:checked ~ .answer::after { content: "Answer 2"; } #option3:checked ~ .answer::after { content: "Answer 3"; } .dropdown:hover { background-color: blue; } #dropdown:checked ~ .dropdown { display: inline; } .dropdown { display: none; }

 <div> <input type="checkbox" class="visually-hidden" id="dropdown"> <label for="dropdown" class="dropdown-header"></label><br> <label class="dropdown" for="option1">Question 1</label><input type="radio" id="option1" name="rad" class="visually-hidden" checked><br> <label class="dropdown" for="option2">Question 2</label><input id="option2" type="radio" class="visually-hidden" name="rad"/><br> <label class="dropdown" for="option3">Question 3</label><input id="option3" type="radio" class="visually-hidden" name="rad"/><br> <div class="answer"></div> </div>

Answer 4

Like it was mentioned before the best way is to use inputs with types radio or checkbox depending on what you want to achieve. The example of using radio buttons and labels is here https://codepen.io/alekskorovin/pen/abBeqzN

 .answer-toggle, .answer { display: none; } .answer-toggle:checked ~ .answer, .question { display: block; }

 <label class="question" for="answer1">Question 1</label> <label class="question" for="answer2">Question 2</label> <label class="question" for="answer3">Question 3</label> <div> <input class="answer-toggle" type="radio" name="answer" id="answer1"> <div class="answer">Answer 1</div> </div> <div> <input class="answer-toggle" type="radio" name="answer" id="answer2"> <div class="answer">Answer 2</div> </div> <div> <input class="answer-toggle" type="radio" name="answer" id="answer3"> <div class="answer">Answer 3</div> </div>

if you remove the same name="answer" then each answer could be shown independently.