Updated method for showing/hiding elements

modules/UI/UI.js

@@ -443,10 +443,10 @@ UI.start = function () {
         // Display notice message at the top of the toolbar
         if (config.noticeMessage) {
             $('#noticeText').text(config.noticeMessage);
-            $('#notice').css({display: 'block'});
+            UIUtil.showElement('notice');
         }
     } else {
-        document.querySelector('#mainToolbarContainer').classList.add('hide');
+        UIUtil.hideElement('mainToolbarContainer');
         FilmStrip.setupFilmStripOnly();
         messageHandler.enableNotifications(false);
         JitsiPopover.enabled = false;

modules/UI/util/UIUtil.js

@@ -219,10 +219,17 @@ const TOOLTIP_POSITIONS = {
      * @param {String} the identifier of the element to show
      */
     showElement(id) {
-        if ($("#"+id).hasClass("hide"))
+        let element = document.getElementById(id);
-            $("#"+id).removeClass("hide");
 
-        $("#"+id).addClass("show");
+        if (!element) {
+            return;
+        }
+
+        if(element.classList.contains('hide')) {
+            element.classList.remove('hide');
+        }
+
+        element.classList.add('show');
     },
 
     /**
@@ -231,10 +238,17 @@ const TOOLTIP_POSITIONS = {
      * @param {String} the identifier of the element to hide
      */
     hideElement(id) {
-        if ($("#"+id).hasClass("show"))
+        let element = document.getElementById(id);
-            $("#"+id).removeClass("show");
 
-        $("#"+id).addClass("hide");
+        if (!element) {
+            return;
+        }
+
+        if(element.classList.contains('show')) {
+            element.classList.remove('show');
+        }
+
+        element.classList.add('hide');
     },
 
     /**