I have a dropdown menu with 9 different sections underneath
1. Section id=Hige x 3
2. Section id=Medium x 3
3. Section id=Low x 3
My goal is to show only the sections that correspond to the selection made in the dropdown menu. I am using jQuery to achieve this. The issue I'm facing is that only one section is displayed at a time - either Hige, Medium, or Low.
Thank you to everyone who has provided answers and assistance, I truly appreciate it
Here is the code I have written:
<select id="test" >
<option value="High">High room</option>
<option value="Medium">Medium room</option>
<option value="Low">low room</option>
</select>
.content{
display: none;
}
#High{
display: block;
}
jQuery(function() {
jQuery('#test').change(function(){
jQuery('.content').hide();
jQuery('#' + jQuery(this).val()).show();
});
});