Displaying and concealing different sections using CSS according to a dropdown selection

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?

Answer №1

The reason for this is that <div> is not a sibling of <option>, but of <select>. CSS does not have a selector for targeting parent elements, so unfortunately it's not achievable with dropdown menus.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

What is the best way to implement a modal that can toggle dark mode using the Konami code, with the added functionality of a close button?

Recently, I attempted to create a Modal window that would activate when the Konami code (↑↑↓↓←→←→BA) is typed. As someone new to JavaScript, I'm still learning and open to feedback. While I have the coding part figured out, I need assi ...

Restoring the background color to its original shade following alterations made by jQuery

In my table, I have multiple rows with alternating white and grey backgrounds achieved through CSS. .profile tr:nth-child(odd) { background:#eee; } .profile tr:nth-child(even) { background:none; } However, I now want to allow users to select a row ...

The data from the AJAX response is not appearing on the HTML table within the modal using jQuery

I have a link that, when clicked, opens the modal and calls the ajax method. The modal opens and the ajax method retrieves the response data successfully, but the data is not displayed within the table on my modal. I have tried multiple approaches, but non ...

What is the best way to eliminate an iframe from inside itself using javascript?

Although I am aware of similar questions being asked before, I find myself having to raise this question again along with some attached code because I am struggling to figure it out. In my JSF project, I have two .xhtml files. The first one is mainPage.xht ...

Issues with the drop-down menu in the <s:select> element arise when attempting to set the

While utilizing a Map to populate the Struts2 tag <s:select >, I have noticed that when the form is submitted multiple times, a blank line is added at the end of the list. For example, if the Map contains 2 key-value pairs, it displays 3 records and ...

Safari scrolling with a sleek black background

When I overscroll over the viewport in Safari, a black line appears on the app in all directions. However, in Chrome, this line is white. Even though I have "theme_color": "#ffffff" set in my manifest.json, the issue persists in Safari ...

Text element within a container of unspecified dimensions

I find it challenging to explain what I have in mind without a visual reference: https://i.sstatic.net/5MSVr.png Some Background - There are certain aspects that can't be altered or shouldn't be changed: On my blog's front page, I utilize ...

Utilizing jQuery to scrape HTML and dynamically manipulate elements

Is there a way to retrieve HTML content from a different subdomain and incorporate it into the current site? HTML snippet: <head> <body> <div id = "items"> <div id = "#one"> <ul> <li><a href = "#">C ...

Do not apply tailwindcss styles to Material-UI

I've been struggling to apply styling from tailwindcss to my MUI button. My setup includes babel and webpack, with the npm run dev script as "webpack --mode development --watch". tailwind.css module.exports = { content: ["./src/**/*.{js, jsx, t ...

What steps should I follow to make a section stay in place on swipepages?

Looking for help to create a sticky section similar to the one on (mobile version). I want to replicate this section with 2 buttons on swipepages.com but I'm not sure about the custom CSS and HTML needed to achieve this. Any assistance would be appre ...

Creating space between flex items in Slick Carousel with Vue

This is my current Slick Carousel. There are 4 items in a row, and I am looking to insert some margin between each item while maintaining the existing aspect-ratio: 1.3/1; I'm struggling with overriding the classes from vue-slick-carousel. Does any ...

Differences in sub column heights within Bootstrap grid system

I am facing an issue with maintaining consistent heights for all my columns. I typically use Bootstrap to adjust their sizes, but the problem arises when using sub divs. Click here to view a DEMO showcasing the issue The first "table" is borrowed from an ...

What is causing this absolute list item to stray away from its parent container?

Why is the ul element taking up the full width of the wrapper element when the container div is its parent? How can this be adjusted? Here is the HTML structure: Wrapper | container | label | input | ul | botton Here is the ...

Embed a section of the webpage using an iframe

I am looking to feature a question from this website on another site using an iframe. However, I only want to display the question portion, not the entire page. <iframe src="http://qstn.mthmtcs.ir/index.php?qa=80" width="100%" height="100%" align="c ...

Ensure that HTML5 form fields are validated dynamically to make them mandatory

I have a form created using Bootstrap that contains several fields. By default, the first and second fields are required. Now, if the third field is filled out, the fourth field becomes mandatory. Similarly, if the fourth field is filled out, the third fi ...

Can an image map area be identified using radial coordinates?

While I have experience with online Imagemap Generators for rectangular or circular areas in HTML pages, things get a bit tricky when dealing with pie-shaped sections. When trying to make each pie slice a separate area, the image map code generated by thes ...

Is there a way to display a caret pointing downwards instead of to the right when clicked to open a sub-menu?

I designed a navigation bar that includes a sub-menu feature. Currently, there is only one member with a caret symbol positioned nearby. When this member is clicked, the sub-menu opens displaying other members. However, the caret remains pointing to the ...

Unable to modify div style using a JS function

I am attempting to show different divs based on the button clicked, with all starting with a display style of "none" except for one default div called "atualizacoes". After clicking a button, all divs should be set to display="none", and then the specific ...

Inserting text directly into innerHTML instead of relying on innerText

Can we insert a string into innerHTML without relying on innerText? For example: var sentence="<b>hello there</b>"; document.querySelector(".container").innerHTML='<span class="thing"></span>'; document.querySelecto ...

Troubleshooting: Issue with Jquery functionality when selecting an item from dropdown menu

I've been trying to dynamically select an item from a dropdown menu, but for some reason it's not working even though I've followed the suggestions on this forum. Here is my HTML: <div> <div class="form-group"> <la ...