Here is an interesting example where sections are hidden or shown based on the input from radio buttons:
CSS:
div[class^="section"] {
display: none;
}
input.choose-a:checked ~ div.section-a,
input.choose-b:checked ~ div.section-b,
input.choose-c:checked ~ div.section-c {
display: block;
}
HTML:
<input type="radio" class="choose-a" name="sectionselect"/>
<input type="radio" class="choose-b" name="sectionselect"/>
<input type="radio" class="choose-c" name="sectionselect"/>
<div class="section-a">Section A content</div>
<div class="section-b">Section B content</div>
<div class="section-c">Section C content</div>
However, I wanted to try showing and hiding sections based on a drop-down list's currently selected option. So, I attempted:
CSS:
div[class^="section"] {
display: none;
}
option.choose-a:checked ~ div.section-a,
option.choose-b:checked ~ div.section-b,
option.choose-c:checked ~ div.section-c {
display: block;
}
HTML:
<select>
<option class="choose-a">option A</option>
<option class="choose-b">option B</option>
<option class="choose-c">option C</option>
</select>
<div class="section-a">Section A content</div>
<div class="section-b">Section B content</div>
<div class="section-c">Section C content</div>
Unfortunately, this method didn't work as expected. It seems that ':checked' should function on an option according to this page. Are there alternative ways to achieve this functionality?