OnClick function not working correctly for repositioning content

Question

I have two issues with my current code.

I'm trying to create an onclick event where that .maincontentcontainer is repositioned when #moreinfo is clicked.

However, when I click it for the second time, it isn't returned to it's original position AND it doesn't work when I click it for a third time, fourth time, etc.

Any help would be great

$(document).ready(function() {
   var moved = false;
    $("#moreinfo").click(function() {
	      if ($(".maincontentcontainer").attr("trigger") === "0") {
	        $(".maincontentcontainer img, .maincontentcontainer h3").animate({right: "50%"});
	        $(".maincontentcontainer").attr("trigger", "1");
	      } else {
	        $(".maincontentcontainer img, .maincontentcontainer h3").animate({left: "50%"});
	        $(".maincontentcontainer").attr("trigger", "0");    
	      }
    });
}); 

.container {
  height: 100vh;
}

.contentcontainer {
  position: relative;
  height: inherit;
  bottom: 0;
}

.maincontentcontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100vh;
}

.maincontentcontainer img {
  position: absolute;
  top: 20%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: bottom;
  object-position: bottom;
  height: 60%;
  width: 60%;
  opacity: 1;
  -webkit-transition: opacity .25s;
  transition: opacity .25s;
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.maincontentcontainer h3 {
  position: absolute;
  top: 45%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: bottom;
  object-position: bottom;
  height: 60%;
  width: 60%;
  opacity: 1;
  -webkit-transition: opacity .25s;
  transition: opacity .25s;
  z-index: 5;
  color: #ffd700;
  font-size: 200%;
  font-family: Lato;
  text-align: center;
}

.bottom {
  position: absolute;
  bottom: 45px;
  width: 100%;
  /* float: left; */
  line-height: 1;
  display: flex;
  justify-content: space-between;
}

#one {
  background-color: #ffd700;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" class="container">
  <div class="contentcontainer">
    <div class="maincontentcontainer" trigger="0">
      <h3>Test</h3>
      <img src="https://static1.squarespace.com/static/5463c1d9e4b065276e6675d3/t/5ae6d699562fa7d975d137ce/1525077665893/El+Cap.jpg"></div>
  </div>
  <div class="bottom">
    <h3 id="moreinfo" class="header">More info</h3>
  </div>
</div>
</div>

Answer 1

To fix your original problem, you are pushing the image too far in your else statement. Change left: 50% to left: 20% to move the image back to where it was originally placed.

Additionally, in order to be able to click it repeatedly, you need to reset the position of the image. You can do this by adding left: 0 to the right animation, and right: 0 to the left animation.

$(document).ready(function() {
   var moved = false;
    $("#moreinfo").click(function() {
	      if ($(".maincontentcontainer").attr("trigger") === "0") {
	        $(".maincontentcontainer img, .maincontentcontainer h3").animate({right: "50%",left:0});
	        $(".maincontentcontainer").attr("trigger", "1");
	      } else {
	        $(".maincontentcontainer img, .maincontentcontainer h3").animate({left: "20%",right:0});
	        $(".maincontentcontainer").attr("trigger", "0");    
	      }
    });
});

.container {
  height: 100vh;
}

.contentcontainer {
  position: relative;
  height: inherit;
  bottom: 0;
}

.maincontentcontainer {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  height: 100vh;
}

.maincontentcontainer img {
  position: absolute;
  top: 20%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: bottom;
  object-position: bottom;
  height: 60%;
  width: 60%;
  opacity: 1;
  -webkit-transition: opacity .25s;
  transition: opacity .25s;
  -webkit-filter: grayscale(100%);
  /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
}

.maincontentcontainer h3 {
  position: absolute;
  top: 45%;
  -o-object-fit: cover;
  object-fit: cover;
  -o-object-position: bottom;
  object-position: bottom;
  height: 60%;
  width: 60%;
  opacity: 1;
  -webkit-transition: opacity .25s;
  transition: opacity .25s;
  z-index: 5;
  color: #ffd700;
  font-size: 200%;
  font-family: Lato;
  text-align: center;
}

.bottom {
  position: absolute;
  bottom: 45px;
  width: 100%;
  /* float: left; */
  line-height: 1;
  display: flex;
  justify-content: space-between;
}

#one {
  background-color: #ffd700;
}
#moreinfo{
  z-index:10;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="one" class="container">
  <div class="contentcontainer">
    <div class="maincontentcontainer" trigger="0">
      <h3>Test</h3>
      <img src="https://static1.squarespace.com/static/5463c1d9e4b065276e6675d3/t/5ae6d699562fa7d975d137ce/1525077665893/El+Cap.jpg"></div>
  </div>
  <div class="bottom">
    <h3 id="moreinfo" class="header">More info</h3>
  </div>
</div>
</div>