Hide a div when another is visible

Question

I am trying to hide a search box with the class .search-container-inner input when the menu overlay is shown. It has a class of .overlay.style-light-bg .

I can't get this to work with CSS, as they have no direct relationship and the search box is before the overlay in the HTML.

I tried editing this solution from a previous post:

// Show an element
var show = function (elem) {
    elem.style.display = 'block';
};

// Hide an element
var hide = function (elem) {
    elem.style.display = 'none';
};

// Toggle element visibility
var toggle = function (elem) {

    // If the element is visible, hide it
    if (window.getComputedStyle(elem).display === 'block') {
        hide(elem);
        return;
    }

    // Otherwise, show it
    show(elem);

    };

But to no avail.

Answer 1

This an aproximation of will be:

var toggle = function (elem) {
if(!elem.classList.contains(class);)
elem.classList.toggle('hidden');
}

Answer 2

I don't know how the overlay is called or presented, but you could check if the class exists and then change display to the search box like this:

var searchInput = document.querySelector(".search-container-inner input");

if (document.querySelector(".overlay.style-light-bg")) { // check if exists
  searchInput.style.display = "none";
} else {
  searchInput.style.display = "block";
}

It would run once, but you also could wrap it into a function to be called whenever you want.

Answer 3

Since you have already laid the groundwork with your code writing the show hide and toggle functions, all that is left is call them, based on your requirement.

var overlay = document.querySelector('.overlay.style-light-bg');
var search = document.querySelector('.search-container-inner input');

if (window.getComputedStyle(overlay).display === 'block') {
    hide(search);
    return;
}

Now, call the above code when you are showing the overlay

Answer 4

You could use MutationObserver to achieve the desired behaviour. It provides the ability to watch for specific changes made to the DOM tree and invoke a callback function to handle the change. It has browser support back to IE 11.

Here is the skeleton code including the magic doSomething() function.

function doSomething() {
  var overlay = window.getComputedStyle(document.querySelector('.overlay.style-light-bg')).display
  var searchInput = document.querySelector('.search-container-inner input')
  searchInput.style.display = (overlay == 'block') ? 'none' : 'block'      
}

// The following code uses MutationObserver to call `doSomething()` when needed

// Handle to the DOM element that will be observed
var overlayNode = document.querySelector('.overlay.style-light-bg')
// Configure the observer to watch for changes to the element's attributes only
var observerConfig = { attributes: true }

// Callback function to execute when mutations are observed
var observerCallback = function(mutationsList, observer) {
  for (var mutation of mutationsList) {
    if (mutation.type == 'attributes') {
      console.log('The ' + mutation.attributeName + ' attribute was modified.')
      if (mutation.attributeName == 'style' || mutation.attributeName == 'class') {
        // handle the mutation of the overlay element's style or class list
        doSomething()
      }
    }
  }
}

// Create a `MutationObserver` instance linked to the `observerCallback` function
var overlayObserver = new MutationObserver(observerCallback);

// Start observing the overlay node for configured mutations
overlayObserver.observe(overlayNode, observerConfig);

Depending on how the overlay was mutated, the console output will display:

The style attribute was modified.

or

The class attribute was modified.