Hiding a SVG at the start-CodePudding

How do I make sure that the left Arrow (SVG) is hidden at that start.

The arrows cycles through the array, when it has reached Wheels the right arrow disappears, when you are back at Door the left arrow disappears. The arrows reappear and disappear continuously so that you know when you you're the last index or the first index.

How can I make the left arrow disappear at the start when opening the page, instead of having to first press the right arrow and then the left arrow.

var parts = ["Door", "Window", "Engine", "Wheels"];
var count = 0
$("#parts").html(parts[0]);

$("#rightb").click(function() {
  count = (count   1)
  $("#parts").html(parts[count])
  if (count >= 3) {
    $("#rightb").hide();
    $("#leftb").click(function() {
      $("#rightb").show()
    })
  }
});

$("#leftb").click(function() {
  count = (count -  1)
  $("#parts").html(parts[count])
  if (count == 0) {
    $("#leftb").css("display", "none")
    $("#rightb").click(function() {
      $("#leftb").css("display", "block")
    })
  }
});

body {
  background: black;
}

.arrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

#leftb {
  position: absolute;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: -200px;
  margin-top: 25px;
  width: 50px;
  height: 60px;
  filter: drop-shadow( 2px 4px 4px rgba(0, 0, 0, .7));
}

#rightb {
  position: absolute;
  background: none;
  border: none;
  cursor: pointer;
  margin-right: -200px;
  margin-top: 25px;
  width: 50px;
  height: 60px;
  filter: drop-shadow( 2px 4px 4px rgba(0, 0, 0, .7));
}

#parts {
  font-size: 24px;
  font-family: 'MS Reference Sans Serif', sans-serif;
  text-shadow: 10px 10px 30px black;
  color: White;
  margin-top: 35px;
  padding-right: 5px;
  padding-left: 5px;
  text-align: center;
  place-content: middle;
}


/* Arrow Animations */

.arrow {
  transform: translateX(-0%) translateY(-0%);
  transition: transform 0.1s;
}

.arrow-top,
.arrow-bottom {
  background-color: #666;
  height: 4px;
  left: -5px;
  position: absolute;
  top: 50%;
}

.arrow-top:after,
.arrow-bottom:after {
  background-color: #fff;
  top: 0;
  transition: all 0.5s;
}

.arrow-top {
  transform: rotate(45deg);
  transform-origin: bottom right;
}

.arrow-top:after {
  left: 100%;
  right: 0;
  transition-delay: 0.5s;
}

.arrow-bottom {
  transform: rotate(-45deg);
  transform-origin: top right;
}

.arrow-bottom:after {
  left: 0;
  right: 100%;
  transition-delay: 0.5s;
}

.arrow:hover .arrow-top:after {
  left: 0;
  transition-delay: 0.5s;
}

.arrow:hover .arrow-bottom:after {
  right: 0;
  transition-delay: 0.5s;
}

.arrow:active {
  transform: translateX(-0%) translateY(-0%) scale(0.9);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div >


  <button  id="leftb">

                <svg width="20px" height="40px" viewBox="0 0 50 80" xml:space="preserve">
                <polyline fill="none" stroke="#FFFFFF" stroke-width="4" 
    http://jsfiddle.net/JulianDotExe/mrsvL35w/33/#            stroke-linecap="round" stroke-linejoin="round" 
                points="45.63,75.8 0.375,38.087 45.63,0.375 "/></svg>

                </button>


  <div id="parts">Parts</div>


  <button  id="rightb">

                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                width="20px" height="40px" viewBox="0 0 50 80" xml:space="preserve">
                <polyline fill="none" stroke="#FFFFFF" stroke-width="4" 
                stroke-linecap="round" stroke-linejoin="round" 
                points="0.375,0.375 45.63,38.087 0.375,75.8 "/></svg>
                
                </button>

CodePudding user response：

You can initially give the left button a default style of display: none as @Reyno suggested and give it display: block on button press.

var parts = ["Door", "Window", "Engine", "Wheels"];
var count = 0
$("#parts").html(parts[0]);


$("#rightb").click(function() {
  count = (count   1)
  $("#leftb").css("display", "block")
  $("#parts").html(parts[count])
  if (count >= 3) {
    $("#rightb").hide();
    $("#leftb").click(function() {
      $("#rightb").show()
    })
  }
});

$("#leftb").click(function() {
  count = (count -  1)
  $("#parts").html(parts[count])
  if (count == 0) {
    $("#leftb").css("display", "none")
    $("#rightb").click(function() {
      $("#leftb").css("display", "block")
    })
  }
});

body {
  background: black;
}

.arrow {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

#leftb {
  position: absolute;
  background: none;
  border: none;
  cursor: pointer;
  display: none;
  margin-left: -200px;
  margin-top: 25px;
  width: 50px;
  height: 60px;
  filter: drop-shadow( 2px 4px 4px rgba(0, 0, 0, .7));
}

#rightb {
  position: absolute;
  background: none;
  border: none;
  cursor: pointer;
  margin-right: -200px;
  margin-top: 25px;
  width: 50px;
  height: 60px;
  filter: drop-shadow( 2px 4px 4px rgba(0, 0, 0, .7));
}

#parts {
  font-size: 24px;
  font-family: 'MS Reference Sans Serif', sans-serif;
  text-shadow: 10px 10px 30px black;
  color: White;
  margin-top: 35px;
  padding-right: 5px;
  padding-left: 5px;
  text-align: center;
  place-content: middle;
}


/* Arrow Animations */

.arrow {
  transform: translateX(-0%) translateY(-0%);
  transition: transform 0.1s;
}

.arrow-top,
.arrow-bottom {
  background-color: #666;
  height: 4px;
  left: -5px;
  position: absolute;
  top: 50%;
}

.arrow-top:after,
.arrow-bottom:after {
  background-color: #fff;
  top: 0;
  transition: all 0.5s;
}

.arrow-top {
  transform: rotate(45deg);
  transform-origin: bottom right;
}

.arrow-top:after {
  left: 100%;
  right: 0;
  transition-delay: 0.5s;
}

.arrow-bottom {
  transform: rotate(-45deg);
  transform-origin: top right;
}

.arrow-bottom:after {
  left: 0;
  right: 100%;
  transition-delay: 0.5s;
}

.arrow:hover .arrow-top:after {
  left: 0;
  transition-delay: 0.5s;
}

.arrow:hover .arrow-bottom:after {
  right: 0;
  transition-delay: 0.5s;
}

.arrow:active {
  transform: translateX(-0%) translateY(-0%) scale(0.9);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div >


  <button  id="leftb">

                <svg width="20px" height="40px" viewBox="0 0 50 80" xml:space="preserve">
                <polyline fill="none" stroke="#FFFFFF" stroke-width="4" 
    http://jsfiddle.net/JulianDotExe/mrsvL35w/33/#            stroke-linecap="round" stroke-linejoin="round" 
                points="45.63,75.8 0.375,38.087 45.63,0.375 "/></svg>

                </button>


  <div id="parts">Parts</div>


  <button  id="rightb">

                <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
                width="20px" height="40px" viewBox="0 0 50 80" xml:space="preserve">
                <polyline fill="none" stroke="#FFFFFF" stroke-width="4" 
                stroke-linecap="round" stroke-linejoin="round" 
                points="0.375,0.375 45.63,38.087 0.375,75.8 "/></svg>
                
                </button>