Add/Remove multiple classes on multiple elements simultaneously

Question

What I'm trying to achieve is using a single element, by onclick, is add and remove 2 class names on 2 independent elements simultaneously.

Here is my element I'm using to trigger the js/jquery.

<div class="top-tool-buttons"><a href="" id="myElementId"></a></div>

Then once clicked turn these elements from this (menu_hide & lockscreen_on):

<div id="somename1" class="list-nav menu_hide"></div>

<div id="somename2" class="screen lockscreen_off"></div>

to this (menu_show & lockscreen_off):

<div id="somename3" class="list-nav menu_show"></div>

<div id="somename4" class="screen lockscreen_on"></div>

Jquery/JS

document.getElementById('#myElementId').addEventListener('click', function() {
.removeClass('menu_hide lockscreen_on').addClass('menu_show lockscreen_off');
}, false);

document.getElementById('#myElementId').addEventListener('click', function() {
.removeClass('menu_show lockscreen_off').addClass('menu_hide lockscreen_on');
}, false);

Open to better practices too as I'm trying to achieve unnoticeable page loading.

Answer 1

You are worrying too much about changing multiple attributes causing screen flickers etc. All these operations will complete in sequence before the page renders :)

You can simplify your code using jQuery though:

JSFiddle: http://jsfiddle.net/TrueBlueAussie/7b75Q/

$('#myElementId').click(function(e) {
    e.preventDefault();
   // Toggle all 4 classes off or on
   $('#somename1').toggleClass('menu_hide menu_show');
   $('#somename2').toggleClass('lockscreen_on lockscreen_off');
});

As noted you must have unique ids for elements. Thanks for updating your example. Have adjusted answer to suit.