Hiding a SVG at the start

October 5, 2022

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 class="arrow">


  <button class="arrow left" 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 class="arrow right" 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>

>Solution :

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 class="arrow">


  <button class="arrow left" 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 class="arrow right" 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>