html display property cant change using javascript

Question

The script works fine for #myLinks but it's not working properly for #myLinks2.

The only thing working for #myLinks2 is the picture change
style

function opentest(x) {
  var y = document.getElementById(x);
  if (y.style.display === "block") {
    if (x == 'myLinks') {
      document.getElementById('citypart').src = "pic/plus.png";
    }
    if (x == 'myLinks2') {
      document.getElementById('roadpart').src = "pic/plus.png";
    }
    y.style.display = "none";
  } else {
    if (x == 'myLinks') {
      document.getElementById('citypart').src = "pic/minus.png";
    }
    if (x == 'myLinks2') {
      document.getElementById('roadpart').src = "pic/minus.png";
    }
    y.style.display = "block";
  }
}

#myLinks {
  display: none;
}

#myLinks2 {
  display: none;
}

<a onclick="opentest('myLinks')" style="background-color:#ccc;color: white;">
  <img id="citypart" src="pic/plus.png" height="42" width="42"> travel to
</a>
<div id="myLinks">
  <a href="athen.php">----Athen</a>
</div>
<a onclick="opentest('myLinks2')" style="background-color:#ccc;color: white;">
  <img id="roadpart" src="pic/plus.png" height="42" width="42"> tour type
</a>
<div id="myLinks2">
  <a href="city.php">----Per city</a>
</div>

I don't know but try to use 'else' maybe? If else inside if mylinks == bla bla bla, else mylinks2 == bla bla bla — nabil arta
– nabil arta, Commented Oct 8, 2020 at 11:28

mplungjan · Accepted Answer · 2020-10-08 12:39:28Z

2

Delegate and use classes

I moved the links to not have them move around when the div opens

document.getElementById("container").addEventListener("click", function(e) {
  let tgt = e.target;
  const parent = tgt.closest("a");
  if (tgt.tagName === "IMG" && parent && parent.classList.contains("toggle")) tgt = parent;
  if (tgt.classList.contains("toggle")) {
    e.preventDefault(); // stop link
    tgt.classList.toggle("open");
    const open = tgt.classList.contains("open")
    tgt.querySelector("img").src = open ? "https://img.icons8.com/flat_round/2x/minus.png" : "https://img.icons8.com/flat_round/2x/plus.png";
    document.getElementById(tgt.dataset.id).classList.toggle("hide", !open);
  }
})

.hide {
  display: none;
}

.toggle {
  background-color: #ccc;
  color: white;
}

<div id="container">
  <a class="toggle" href="#" data-id="myLinks">
    <img src="https://img.icons8.com/flat_round/2x/plus.png" height="42" width="42"> travel to
  </a>
  <a class="toggle" href="#" data-id="myLinks2">
    <img src="https://img.icons8.com/flat_round/2x/plus.png" height="42" width="42"> tour type
  </a>

  <div id="myLinks" class="hide">
    <a href="athen.php">----Athens</a>
  </div>
  <div id="myLinks2" class="hide">
    <a href="city.php">----Per city</a>
  </div>
</div>

edited Oct 8, 2020 at 12:39

answered Oct 8, 2020 at 11:28

mplungjan

180k29 gold badges183 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Chenyang Ji Over a year ago

thank you very much for the answer. But the same problem occurs here, too. For #myLink2 only the picture change is working

mplungjan Over a year ago

No. In this snippet the image changes and "Athen" shows on link1 and "per city" shows on link 2

Collectives™ on Stack Overflow

html display property cant change using javascript

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related