Show Hide Divs

JavaScript
1

I have a select which is dynamically populated with a short list of products and returns as a value the product name

Below this I have a

with an id which corresponds to the name of the products and displays product details. This div has a value of display: none

Finally I have this simple function which gets the name from the select value and then changes the corresponding div to a value of block.

$(document).ready(function(){
    $("select").change(function(){
    var name = document.getElementById('selectinterior'),
    details = name.value;
    document.getElementById(details).style.display = 'block';
    })
});

It all works well except when another value is then selected the first div with the product details still shows. I need to have only one product detail div showing no matter how many times the user changes the select choice.

2

Select and hide all the others on each change, then only show the one. So if you have five divs, hide them all first, then show the one you want to show. You can do this by selecting them all using a class name or by tag name and then hiding.

Hopefully you get what I am saying.

1 Like
3

Roughly like this perhaps.

This assumes you can add a common class to all the divs that you want to show and hide.

3 Likes
4

Thank you. I found the problem after using your code as a test. All working well now.

1 Like