How do I use Javascript to ensure that the first column appears for all the options selected in the drop-down menu?

A pretty basic question from a first-timer here. I require your help in amending the JavaScript in the below code so that the first column (id="First Column") appears on the left for all the options selected. I have searched multiple threads and sites but haven't been able to crack this.

Also would like to know if a Javascript code would be better to crack this or Jquery would be better if I need to use this on a Wordpress site. Most people suggest JS a better option for Wordpress, was wondering about the same.

I'm sure its a pretty basic query and any help with this would be much appreciated.

<!DOCTYPE html>
<html>
    <head>
        <title></title>
    </head>
    <style>
.inv {
    display: none;
}
    </style>
    <body>
        <select id="target">
            <option value="">Select...</option>
            <option value="content_1">Option 1</option>
            <option value="content_2">Option 2</option>
            <option value="content_3">Option 3</option>
            <select>

        <div id="First Column" class="inv">
                <ul class="cd-features-list">
                        <li>Dis</li>
                        <li>Wea</li>
                        <li>Tra</li>
                    </ul>
        </div>
        <div id="content_1" class="inv">Option 1
                <ul class="cd-features-list">
                        <li>Option 1 Dis</li>
                        <li>Option 1 Wea</li>
                        <li>Option 1 Tra</li>
                    </ul>            
        </div>
        <div id="content_2" class="inv">Option 2
            <ul class="cd-features-list">
                <li>Option 2 Dis</li>
                <li>Option 2 Wea</li>
                <li>Option 2 Tra</li>
            </ul>           
        </div>
        <div id="content_3" class="inv">Option 3
            <ul class="cd-features-list">
                <li>Option 3 Dis</li>
                <li>Option 3 Wea</li>
                <li>Option 3 Tra</li>
            </ul>      
        </div>
        <script>
            document
                .getElementById('target')
                .addEventListener('change', function () {
                    'use strict';
                    var vis = document.querySelector('.vis'),   
                        target = document.getElementById(this.value);
                    if (vis !== null) {
                        vis.className = 'inv';
                    }
                    if (target !== null ) {
                        target.className = 'vis';
                    }
            });
        </script>
        
    </body>
</html>

1 answer

  • answered 2019-02-10 13:20 Artem Kobets

    I don't think you need jQuery for this particular issue. Check out the updated script below.

    <!DOCTYPE html>
    <html>
        <head>
            <title></title>
        </head>
        <style>
    .inv {
        display: none;
    }
        </style>
        <body>
            <select id="target">
                <option value="">Select...</option>
                <option value="content_1">Option 1</option>
                <option value="content_2">Option 2</option>
                <option value="content_3">Option 3</option>
                <select>
    
            <div id="First Column" class="inv">
                    <ul class="cd-features-list">
                            <li>Dis</li>
                            <li>Wea</li>
                            <li>Tra</li>
                        </ul>
            </div>
            <div id="content_1" class="inv">Option 1
                    <ul class="cd-features-list">
                            <li>Option 1 Dis</li>
                            <li>Option 1 Wea</li>
                            <li>Option 1 Tra</li>
                        </ul>            
            </div>
            <div id="content_2" class="inv">Option 2
                <ul class="cd-features-list">
                    <li>Option 2 Dis</li>
                    <li>Option 2 Wea</li>
                    <li>Option 2 Tra</li>
                </ul>           
            </div>
            <div id="content_3" class="inv">Option 3
                <ul class="cd-features-list">
                    <li>Option 3 Dis</li>
                    <li>Option 3 Wea</li>
                    <li>Option 3 Tra</li>
                </ul>      
            </div>
            <script>
                document
                    .getElementById('target')
                    .addEventListener('change', function () {
                        'use strict';
                        // using querySelectorAll to get all matching elements
                        var allVisible = document.querySelectorAll('.vis'),
                            target = document.getElementById(this.value),
                            firstColumn = document.getElementById('First Column');
                        // iterate through all visible elements instead of just one
                        allVisible.forEach(function(element) {
                            element.className = 'inv';
                        });
                        if (target !== null) {
                            target.className = 'vis';
                        }
                        // show or hide first column depending on whether any option is selected
                        if (firstColumn !== null) {
                            firstColumn.className = this.value ? 'vis' : 'inv';
                        }
                });
            </script>
            
        </body>
    </html>