[skip ci] Use toggleClass instead of toggle

app/assets/javascripts/behaviors/secret_values.js

@@ -33,12 +33,12 @@ export default class SecretValues {
   updateDom(isRevealed) {
     const values = this.container.querySelectorAll(this.valueSelector);
     values.forEach((value) => {
-      value.classList.toggle('hide', !isRevealed);
+      value.classList.toggle('hidden', !isRevealed);
     });
 
     const placeholders = this.container.querySelectorAll(this.placeholderSelector);
     placeholders.forEach((placeholder) => {
-      placeholder.classList.toggle('hide', isRevealed);
+      placeholder.classList.toggle('hidden', isRevealed);
     });
 
     this.revealButton.textContent = isRevealed ? n__('Hide value', 'Hide values', values.length) : n__('Reveal value', 'Reveal values', values.length);

app/assets/javascripts/behaviors/toggler_behavior.js

@@ -20,7 +20,7 @@ $(() => {
 
     $container
       .find('.js-toggle-content')
-      .toggle(toggleState);
+      .toggleClass('hidden', toggleState);
   }
 
   $('body').on('click', '.js-toggle-button', function toggleButton(e) {

app/assets/javascripts/build_variables.js

@@ -4,7 +4,7 @@ export default function handleRevealVariables() {
   $('.js-reveal-variables')
     .off('click')
     .on('click', function click() {
-      $('.js-build-variables').toggle();
+      $('.js-build-variables').toggleClass('hidden');
       $(this).hide();
     });
 }

app/assets/javascripts/ci_variable_list/ajax_variable_list.js

@@ -52,8 +52,8 @@ export default class AjaxVariableList {
 
   onSaveClicked() {
     const loadingIcon = this.saveButton.querySelector('.js-secret-variables-save-loading-icon');
-    loadingIcon.classList.toggle('hide', false);
-    this.errorBox.classList.toggle('hide', true);
+    loadingIcon.classList.toggle('hidden', false);
+    this.errorBox.classList.toggle('hidden', true);
     // We use this to prevent a user from changing a key before we have a chance
     // to match it up in `updateRowsWithPersistedVariables`
     this.variableList.toggleEnableRow(false);
@@ -70,7 +70,7 @@ export default class AjaxVariableList {
         status === statusCodes.BAD_REQUEST,
     })
       .then((res) => {
-        loadingIcon.classList.toggle('hide', true);
+        loadingIcon.classList.toggle('hidden', true);
         this.variableList.toggleEnableRow(true);
 
         if (res.status === statusCodes.OK && res.data) {
@@ -79,11 +79,11 @@ export default class AjaxVariableList {
         } else if (res.status === statusCodes.BAD_REQUEST) {
           // Validation failed
           this.errorBox.innerHTML = generateErrorBoxContent(res.data);
-          this.errorBox.classList.toggle('hide', false);
+          this.errorBox.classList.toggle('hidden', false);
         }
       })
       .catch(() => {
-        loadingIcon.classList.toggle('hide', true);
+        loadingIcon.classList.toggle('hidden', true);
         this.variableList.toggleEnableRow(true);
         Flash(s__('CiVariable|Error occured while saving variables'));
       });

app/assets/javascripts/merge_request_tabs.js

@@ -367,7 +367,7 @@ export default class MergeRequestTabs {
   //
   // status - Boolean, true to show, false to hide
   toggleLoading(status) {
-    $('.mr-loading-status .loading').toggle(status);
+    $('.mr-loading-status .loading').toggleClass('hidden', status);
   }
 
   diffViewType() {

app/assets/javascripts/notes.js

@@ -1229,8 +1229,8 @@ export default class Notes {
       const isForced = forceShow === true || forceShow === false;
       const showNow = forceShow === true || (!isCurrentlyShown && !isForced);
 
-      targetRow.toggle(showNow);
-      notesContent.toggle(showNow);
+      targetRow.toggleClass('hidden', showNow);
+      notesContent.toggleClass('hidden', showNow);
     }
 
     if (addForm) {

app/assets/javascripts/pages/admin/admin.js

@@ -25,7 +25,7 @@ export default function adminInit() {
 
   $('body').on('click', '.js-toggle-colors-link', (e) => {
     e.preventDefault();
-    $('.js-toggle-colors-container').toggle();
+    $('.js-toggle-colors-container').toggleClass('hidden');
   });
 
   $('.log-tabs a').on('click', function logTabsClick(e) {

app/assets/javascripts/pages/explore/groups/index.js

@@ -12,5 +12,5 @@ document.addEventListener('DOMContentLoaded', () => {
     landingElement.querySelector('.dismiss-button'),
     'explore_groups_landing_dismissed',
   );
-  exploreGroupsLanding.toggle();
+  exploreGroupsLanding.toggleClass('hidden');
 });

app/assets/javascripts/pages/users/user_tabs.js

@@ -181,7 +181,7 @@ export default class UserTabs {
 
   toggleLoading(status) {
     return this.$parentEl.find('.loading-status .loading')
-      .toggle(status);
+      .toggleClass('hidden', status);
   }
 
   setCurrentAction(source) {

app/assets/javascripts/project_fork.js

@@ -4,6 +4,6 @@ export default () => {
   $('.js-fork-thumbnail').on('click', function forkThumbnailClicked() {
     if ($(this).hasClass('disabled')) return false;
 
-    return $('.js-fork-content').toggle();
+    return $('.js-fork-content').toggleClass('hidden');
   });
 };

app/helpers/icons_helper.rb

@@ -56,7 +56,7 @@ module IconsHelper
 
   def spinner(text = nil, visible = false)
     css_class = 'loading'
-    css_class << ' hide' unless visible
+    css_class << ' hidden' unless visible
 
     content_tag :div, class: css_class do
       icon('spinner spin') + text