how to use style.display value in condition

Question

I'm trying to make a simple accordion. I'm using style.display to check if the display attribute of an element is block or none but it returns no value

var mybtn = document.querySelectorAll("button");

for (var i = 0; i < mybtn.length; i++) {
  mybtn[i].onclick = function() {
    var mySibling = this.nextElementSibling;

    console.log(this.style.display);

    if (mySibling.style.display == "block") {
      mySibling.style.display = "none";
    } else {
      mySibling.style.display = "block";
    }
  }
}

https://stackoverflow.com/questions/16748813/mydiv-style-display-returns-blank-when-set-in-master-stylesheet — epascarello, Sep 12 '19 at 18:08

score 0 · Answer 1 · answered Sep 12 '19 at 18:33

var mybtn = document.getElementById("click_me");

mybtn.onclick = function() {
  var mySibling = this.nextElementSibling;

  //console.log(this.style.display);

  if (mySibling.style.display === "none") {
    mySibling.style.display = "block";
  } else {
    mySibling.style.display = "none";
  }
}

 <button type="button" id="click_me">Click Me!</button>
 <button type="button">Show/Hide</button>

how to use style.display value in condition

1 Answers1