How can I do something like this?

Example I have 2 divs:

I wanna do something like this... If 'some-class' display=none; then 'some-other-class' display=none;

What do I need to use to do something like this jQuery, javascript? Thank you.

CodePudding user response：

With jQuery, you can use:

$('.element').is(':visible') 
   ? $('.other-class').hide() 
   : $('.other-class').show()

Or with vanillaJS

element.style.display === 'block' 
  ? other_element.style.display = 'block'
  : other_element.style.display = 'none'

Or even better way (I think)

other_element.style.display = element.style.display

The last way take the element style display value and assign to other_element style display.

CodePudding user response：

Here is a method taking advantage of css variables. I set a variable named --class-display on the root element, and then I can use that variable in any place throughout my css. When I want to hide that element, I can use js to change the root variable property, and it will apply throughout my css.

document.querySelector(".someClass")
  .addEventListener("click", async () => {
    const root = document.documentElement.style;
    root.setProperty("--class-display", "none");
    await new Promise(r => setTimeout(r, 1000));
    root.setProperty("--class-display", "block");
  });

:root {
  --class-display: block;
}
body {
  display: flex;
  justify-content: space-around;
}
div {
  height: 4rem;
  aspect-ratio: 1;
  background: black;
  color: white;
}
.someClass, .otherClass {
  display: var(--class-display);
}

<div class="someClass"><b>CLICK ME</b></div>
<div class="otherClass"></div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>