Javascript-html element stuck when clicked 2nd time

Question

I have a with an unordered list and I have it so It pops out when I click an image(along with the image positioning acccordingly) but when I click the image again, it does'nt go back to the OG spot, even though I have element.style.right in my js file. The js works when I do click it the first time and the div does go back when I click the image a second time...just not the image itself

My HTML

function leftboxShow() {
  var a = document.getElementById("list-box");
  var b = document.getElementById("Show")
  if (a.style.display === "none") {
    a.style.display = "block"
    a.style.left = "0px"
    b.style.left = "260px"
  } else {
    a.style.display = "none"
    a.style.right = "0px"
    b.style.right = "260px"
  }

}

#list-box {
  background-image: linear-gradient(red, darkred);
  width: 265px;
  height: 1048px;
  position: relative;
  top: 40px;
  right: 265px;
  display: none;
}

ul#category-list li {
  font-size: 24px;
  padding: 1px 10px 5px 25px;
  color: blue;
  border-top: 3px dashed grey;
  list-style: none;
}

ul#category-list li:hover {
  opacity: 0.92;
  -webkit-transition: all 0.3s ease-in-out;
  background-color: pink;
}

ul#category-list {
  border-bottom: 3px dashed grey;
  border-right: 3px dashed grey;
  ;
}

#Show {
  width: 25px;
  height: 25px;
  position: relative;
  top: 55px;
  left: 0px;
  right: 0px;
  z-index: 2;
}

<img src="../../Images/Main/main/show ff.png" id="Show" onclick="leftboxShow()" />
<div id="list-box">
  <ul id="category-list">
    <li>Anime</li>
    <li>Animation</li>
    <li>Art</li>
    <li>Business</li>
    <li>Cooking</li>
    <li>DIY</li>
    <li>Decor</li>
    <li>Education</li>
    <li>Entertainment</li>
    <li>Erotica</li>
    <li>Fashion</li>
    <li>Finance</li>
    <li>Fitness</li>
    <li>Gaming</li>
    <li>Gardening</li>
    <li>Health</li>
    <li>Literature</li>
    <li>Music</li>
    <li>Modeling</li>
    <li>News</li>
    <li>Politics</li>
    <li>Podcasts</li>
    <li>Science</li>
    <li>Spiritality</li>
    <li>Technology</li>
    <li>Travel</li>
    <li>Vlogs</li>
    <li>Wildlife</li>
  </ul>
</div>

That's because the `img` node's `style` attribute is not set as `display: none;` initialy. So the browser waits for the first click to set the style as display: none and the second click is the step that actually validate your condition. — Adnane Ar, May 06 '21 at 20:34
Change your `if-else` for your `leftBoxShow()` as well. Check the link on my answer regarding why your first click on the image is not opening your menu. — Prosy Arceno, May 06 '21 at 20:47

Prosy Arceno · Answer 1 · 2021-05-06T20:44:08.873

Change your b.style.right = "260px" to b.style.left = "0px". Thats how you return it to the original position.

I also changed your conditional so that your first click would open your menu. See this for more information.

function leftboxShow() {
  var a = document.getElementById("list-box");
  var b = document.getElementById("Show")
  if (a.style.display == "block") {
    a.style.display = "none"
    a.style.right = "0px"
    b.style.left = "0px"
  } else {
    a.style.display = "block"
    a.style.left = "0px"
    b.style.left = "260px"
  }

}

#list-box {
  background-image: linear-gradient(red, darkred);
  width: 265px;
  height: 1048px;
  position: relative;
  top: 40px;
  right: 265px;
  display: none;
}

ul#category-list li {
  font-size: 24px;
  padding: 1px 10px 5px 25px;
  color: blue;
  border-top: 3px dashed grey;
  list-style: none;
}

ul#category-list li:hover {
  opacity: 0.92;
  -webkit-transition: all 0.3s ease-in-out;
  background-color: pink;
}

ul#category-list {
  border-bottom: 3px dashed grey;
  border-right: 3px dashed grey;
  ;
}

#Show {
  width: 25px;
  height: 25px;
  position: relative;
  top: 55px;
  left: 0px;
  right: 0px;
  z-index: 2;
}

<img src="../../Images/Main/main/show ff.png" id="Show" onclick="leftboxShow()" />
<div id="list-box">
  <ul id="category-list">
    <li>Anime</li>
    <li>Animation</li>
    <li>Art</li>
    <li>Business</li>
    <li>Cooking</li>
    <li>DIY</li>
    <li>Decor</li>
    <li>Education</li>
    <li>Entertainment</li>
    <li>Erotica</li>
    <li>Fashion</li>
    <li>Finance</li>
    <li>Fitness</li>
    <li>Gaming</li>
    <li>Gardening</li>
    <li>Health</li>
    <li>Literature</li>
    <li>Music</li>
    <li>Modeling</li>
    <li>News</li>
    <li>Politics</li>
    <li>Podcasts</li>
    <li>Science</li>
    <li>Spiritality</li>
    <li>Technology</li>
    <li>Travel</li>
    <li>Vlogs</li>
    <li>Wildlife</li>
  </ul>
</div>

score 1 · Accepted Answer · answered May 06 '21 at 20:39

When you initially style your img, you have left set to 0px, in your javascript function you set the right attribute to 260px, instead of doing that, reset the left style to 0px, please see working snippet

    function leftboxShow() {
      var a = document.getElementById("list-box");
      var b = document.getElementById("Show")
      if (a.style.display === "none") {
        a.style.display = "block"
        a.style.left = "0px"
        b.style.left = "260px"
      } else {
        a.style.display = "none"
        a.style.right = "0px"
        b.style.left= "0px"
      }

    }

   #list-box {
      background-image: linear-gradient(red, darkred);
      width: 265px;
      height: 1048px;
      position: relative;
      top: 40px;
      right: 265px;
      display: none;
    }

    ul#category-list li {
      font-size: 24px;
      padding: 1px 10px 5px 25px;
      color: blue;
      border-top: 3px dashed grey;
      list-style: none;
    }

    ul#category-list li:hover {
      opacity: 0.92;
      -webkit-transition: all 0.3s ease-in-out;
      background-color: pink;
    }

    ul#category-list {
      border-bottom: 3px dashed grey;
      border-right: 3px dashed grey;
      ;
    }

    #Show {
      width: 25px;
      height: 25px;
      position: relative;
      top: 55px;
      left: 0px;
      right: 0px;
      z-index: 2;
    }

 <img src="../../Images/Main/main/show ff.png" id="Show" onclick="leftboxShow()" />
    <div id="list-box">
      <ul id="category-list">
        <li>Anime</li>
        <li>Animation</li>
        <li>Art</li>
        <li>Business</li>
        <li>Cooking</li>
        <li>DIY</li>
        <li>Decor</li>
        <li>Education</li>
        <li>Entertainment</li>
        <li>Erotica</li>
        <li>Fashion</li>
        <li>Finance</li>
        <li>Fitness</li>
        <li>Gaming</li>
        <li>Gardening</li>
        <li>Health</li>
        <li>Literature</li>
        <li>Music</li>
        <li>Modeling</li>
        <li>News</li>
        <li>Politics</li>
        <li>Podcasts</li>
        <li>Science</li>
        <li>Spiritality</li>
        <li>Technology</li>
        <li>Travel</li>
        <li>Vlogs</li>
        <li>Wildlife</li>
      </ul>
    </div>

score 0 · Answer 3 · answered May 06 '21 at 20:43

There you are, I have just made a small little modification in the condition!

function leftboxShow() {
  var a = document.getElementById("list-box");
  var b = document.getElementById("Show")
  if (getComputedStyle(a).display != "none") {
    a.style.display = "none"
    a.style.right = "0px"
    b.style.right = "0"
    b.style.left = "0"
  } else {
    a.style.display = "block"
    a.style.left = "0px"
    b.style.left = "260px"
  }

}

#list-box {
  background-image: linear-gradient(red, darkred);
  width: 265px;
  height: 1048px;
  position: relative;
  top: 40px;
  right: 265px;
  display: none;
}

ul#category-list li {
  font-size: 24px;
  padding: 1px 10px 5px 25px;
  color: blue;
  border-top: 3px dashed grey;
  list-style: none;
}

ul#category-list li:hover {
  opacity: 0.92;
  -webkit-transition: all 0.3s ease-in-out;
  background-color: pink;
}

ul#category-list {
  border-bottom: 3px dashed grey;
  border-right: 3px dashed grey;
  ;
}

#Show {
  width: 25px;
  height: 25px;
  position: relative;
  top: 55px;
  left: 0px;
  right: 0px;
  z-index: 2;
}
Expand snippet

<img src="../../Images/Main/main/show ff.png" id="Show" onclick="leftboxShow()" />
<div id="list-box">
  <ul id="category-list">
    <li>Anime</li>
    <li>Animation</li>
    <li>Art</li>
    <li>Business</li>
    <li>Cooking</li>
    <li>DIY</li>
    <li>Decor</li>
    <li>Education</li>
    <li>Entertainment</li>
    <li>Erotica</li>
    <li>Fashion</li>
    <li>Finance</li>
    <li>Fitness</li>
    <li>Gaming</li>
    <li>Gardening</li>
    <li>Health</li>
    <li>Literature</li>
    <li>Music</li>
    <li>Modeling</li>
    <li>News</li>
    <li>Politics</li>
    <li>Podcasts</li>
    <li>Science</li>
    <li>Spiritality</li>
    <li>Technology</li>
    <li>Travel</li>
    <li>Vlogs</li>
    <li>Wildlife</li>
  </ul>
</div>

Javascript-html element stuck when clicked 2nd time

3 Answers3