Javascript-html element stuck when clicked 2nd time

user_12700801 0
Viewed 56

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>

frontend html javascript
3 Answers

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>

user_124152870

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>

user_48301960

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>

user_115234470
Related