How to hide an element based on sibling's css property value?-CodePudding

<div id="mc-response">
    <div id="mc-success-response" style="display:none"></div>
    <div id="targeted">Success</div>
</div>

I am trying to show "#targeted" element when "#mc-success-response" element's display is "block". How we can achieve this?

CodePudding user response：

If the targeted div display is none in the beginning (or has an opacity of 0 etc), we can use the MutationObserver class in JS

var observerDiv = document.querySelector("#mc-success-response")
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function() {
        if (observerDiv.style.display === "block") {
            document.querySelector("#targeted").style.display = "block"
        }
        else document.querySelector("#targeted").style.display = "none"
    });    
});

observer.observe(observerDiv, { attributes : true, attributeFilter : ['style'] });

CodePudding user response：

const elementMcSuccessResponse = document.getElementById(
      "mc-success-response"
    );
const targetedElement = document.getElementById("targeted");

const btn = document.getElementById("button");

 btn.addEventListener("click", () => {
  if (elementMcSuccessResponse.style.display === "none") {
    /// mc-success-response is hidden
    elementMcSuccessResponse.style.display = "block";
    targetedElement.style.display = "none";

  } else if (elementMcSuccessResponse.style.display !== "none") {
    /// mc-success-response is visible
    elementMcSuccessResponse.style.display = "none";
    targetedElement.style.display = "block";
  }
});

 <div id="mc-response">
    <div id="mc-success-response">mc-success-response</div>
    <div id="targeted" style="display: none">Success</div>
    
    <button id="button">click</button>
  </div>