Hide elements the correct way

Question

I'm using JavaScript to hide and show some elements onclick events

Using this code

function showPreOne() {
    document.getElementById('SecandModalFilter').classList.add('d-none');
    document.getElementById('FirstModalFilters').classList.add('d-none');
    document.getElementById('colocation').classList.add('d-none');
    document.getElementById('coloc-row').classList.add('d-none');
    document.getElementById('preFirstModalFilter').classList.remove('d-none');
    document.getElementById('FirstModalFiltersa').classList.add('d-none');
}

I don't think this is the correct way! ? specially if I have a very large page with a lot of tabs and elements ?

Thank you

This answer may help tidy it up a little bit: https://stackoverflow.com/questions/18880890/how-do-i-toggle-an-elements-class-in-pure-javascript — Andrew Corrigan, Mar 04 '22 at 14:21

score 2 · Answer 1 · answered Mar 04 '22 at 14:20

If the class is display: none, there's nothing wrong with that approach. Although the code would be more maintainable if you managed the add/remove elements with arrays of ids instead of doing it line by line.

score 2 · Accepted Answer · answered Mar 04 '22 at 14:23

You could add a class on all the element that can be hidden (I assume you are handling a tab system), and just show the one you want to be visible:

function showPreOne() {
    document.querySelectorAll('.tab').forEach(elt => elt.classList.add('d-none'))
    document.querySelector('#SecandModalFilter').classList.remove('d-none');
}

Otherwise, your current method is not wrong per-say.

Jaay · Answer 3 · 2022-03-04T14:34:52.757

Your approach can be a bit better, if you are showing/hiding elements I suggest you to use the toggle functionnality. This way you can use only one function that will manage your click event and hide/show your elements, just be sure that the initial state (d-none class present or not) is correct :

function showHide() {
    document.getElementById('SecandModalFilter').classList.toggle('d-none');
    document.getElementById('FirstModalFilters').classList.toggle('d-none');
    document.getElementById('colocation').classList.toggle('d-none');
    document.getElementById('coloc-row').classList.toggle('d-none');
    document.getElementById('preFirstModalFilter').classList.toggle('d-none');
    document.getElementById('FirstModalFiltersa').classList.toggle('d-none');
}

More informations here Toggle specification

Hide elements the correct way

3 Answers3