Q:

Image Toggle Gallery

I have a gallery that I want to have a toggle function, that when you click on an image, it changes to another one. I  have the onclick="toggleBoth() code in place for the first two images in the gallery, but it's not working. 
When you click on the image, it doesn't change. Is there something I'm doing wrong? 

var slideIndex = 1;

showSlide(slideIndex);

function plusSlides(n){
    showSlide(slideIndex += n);
}

function currentSlide(n) {
    showSlide(slideIndex = n);
}

function showSlide(n){
    var i;
    var slides = document.getElementsByClassName("myslides");

    if (n > slides.length) { slideIndex = 1};

    if (n < 1) { slideIndex = slides.length};

    for (i=0;i<slides.length;i++) {
        slides[i].style.opacity = "0";
    };

    slides[slideIndex-1].style.opacity = "1";
}

function toggleImage(id) {
    var image = document.getElementById(id);
    image.style.display = image.style.display == "none" ? "block" : "none";
}

function toggleBoth() {
  toggleImage('image1')
  toggleImage('image2')
}

function toggleBoth() {
  toggleImage('image1')
  toggleImage('image2')
  toggleImage('image3')
  toggleImage('image4')
}

$(document).ready(function(){
  $(".next").click(function(){
    $("")
  });
});
* {
margin: 0;
padding: 0;
list-style-type:none;
}

body{
  margin: 0;
  font-size: 100%;
/*   background-color: #6E92A1; */
  background-color: #232324;
  height: 100vh;
}

.header {
  overflow: auto;
/*   background-color: #b0d5d0; */
  background-color: #ECAAAC;
}

.logo {
  float: left;
  padding-top: 1em;
/*   padding-bottom: 1em; */
  width: 20%;
  text-align: center;
  font-family: 'Allerta', sans-serif;
  text-transform: uppercase;
 font-weight: 700;
/*   line-height: 50px; */

}

.logo a {
  text-decoration: none;
  font-size: 1em;
  color: black;
}

.nav {
  background-color: #232324;
  padding-top: 1em;
  padding-bottom: 1em;
  width: 80%;
  float: right;
}

li {
  display: inline-block !important;
  border-right: 1px solid #656568;
  padding-right: 1.5em;
  padding-left: 1.5em;
}

li:last-child{
  border-right: none;
}

li a {
  text-decoration: none;
  text-align: center;
  color: white;
  font: normal 62.5% "proxima-nova-alt", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
 font-weight: 700;
 letter-spacing: 1px;
}

li a:hover {
  color: #ECAAAC;
}

.text {
  background-color: black;
  padding: .75em 0 .75em 0;
}

p {
  color: #656568;
  text-align: center;
  font-size: 1em;
  font: italic 80% "proxima-nova-alt", Helvetica, Arial, sans-serif;
}

#slideshow-container{
  position: relative;
  margin: auto;
  background-color: black;
  overflow: hidden;
  padding-bottom: 2.5em;
/*   height: 1000px !important; */
  height: 1000px !important;
}

#slideshow-container img{
  display: block;
  margin: 0 auto;
  max-width: 100%;
  position: relative;
  height: 960px;
}

.myslides {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  opacity: 1;
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

.prev , .next{
  position: absolute;
  top: 50%;
  font-size: 30px;
  font-weight: bold;
  padding: 16px;
  margin-top: -22px;
/*   border-radius: 0 3px 3px 0; */
  color: #fff;
  cursor: pointer;
  z-index: 1;
}

.next{
  right: 0;
/*   border-radius: 3px 0 0 3px; */
}

.prev:hover,.next:hover{
/*   color: #b0d5d0 ; */
/*   background-color: rgba(0,0,0,0.8); */
}

.caption{
  text-align: center;
  position: absolute;
/*   bottom: 6px; */
  width: 100%;
  color: #f2f2f2;
  text-shadow: 2px 2px 4px black;
  font: normal 62.5% "proxima-nova-alt", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
 font-weight: 700;
 letter-spacing: 1px;
  padding-top: 1.25em;
/*   padding-bottom: .75em; */
/*   font-size: 15px; */
/*   padding: 8px 22px; */
}

@media(max-width: 798px) {
  #slideshow-container {
    height: 640px !important;
  }
  #slideshow-container img {
    max-height: 600px !important;
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
  .nav {
    width: 75%;
  }
  .logo {
    width: 25%;
    text-align: center;
  }
 .logo a {
    font-size: .75em;
  }
  li {
    padding-right: .75em !important;
    padding-left: .75em !important;
  }
}
  
@media(max-width: 468px) {
    #slideshow-container {
    height: 440px !important;
  }
  #slideshow-container img{
    max-height: 400px !important;
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
  .nav {
    width: 65%;
  }
  .logo {
    width: 35%;
    text-align: center;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!---Images not owned by me --->
<link href="https://fonts.googleapis.com/css?family=Allerta" rel="stylesheet">

<div class="header">
  <div class="logo">
    <a href="">Gabriella Farfan</a>
  </div>
  <div class="nav">
      <ul>
        <li><a href="">Portfolio</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
      </ul>
  </div>
</div>



<div id="slideshow-container">
  
<div class="text">
  <p>Click on the image to see the before and after</p>
</div>

  <div class="myslides fade">
    <div><img id="image1" onclick="toggleBoth()"  src="http://www.hestetika.it/wp-content/uploads/2016/10/stevemccurry_5.jpg">
      <img id="image2" onclick="toggleBoth()" style="display:none;" src="https://static.boredpanda.com/blog/wp-content/uploads/2014/12/Top-10-photographers-for-travel-portraits27__700.jpg">
    </div>
      <div class="caption">Text 1</div>
  </div>

  <div class="myslides fade">
    <div><img id="image3" onclick="toggleBoth()" src="https://i.pinimg.com/736x/2f/7a/33/2f7a33e82f03de319faa0663371e2609--interesting-faces-freckles.jpg">
    <img id="image4" onclick="toggleBoth()" style="display:none;" src="http://cdn3.spiegel.de/images/image-945792-galleryV9-buud-945792.jpg">
    </div>
      <div class="caption">Text 2</div>
  </div>

 <div class="myslides fade">
<div><img src="https://media.discordapp.net/attachments/327123793040637952/436369548996902913/nwts_ariana.jpg?width=1050&height=1050"></div>
  <div class="caption">Text 3</div>
  </div>

  <div class="myslides fade">
<div><img src="http://jmacpratt.weebly.com/uploads/1/2/0/1/12013129/portrait2_orig.jpg"></div>
  <div class="caption">Text 4</div>
  </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

    <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>

<br>

A:

your problem is that the image in question is not receiving the click event. Since your other images are stacked on top of the first one, they are receiving the click event (opacity:0 items are still recipients for events). The other images need to be display:none if you want them to not obstruct the events. Alternatively you could change the stacking context so the image which is visible is foremost, or bind the click event handler to the common parent and figure out who to toggle from there. Hope that helps. 

var slideIndex = 1;

showSlide(slideIndex);

function plusSlides(n){
    showSlide(slideIndex += n);
}

function currentSlide(n) {
    showSlide(slideIndex = n);
}

function showSlide(n){
    var i;
    var slides = document.getElementsByClassName("myslides");

    if (n > slides.length) { slideIndex = 1};

    if (n < 1) { slideIndex = slides.length};

    for (i=0;i<slides.length;i++) {
        slides[i].style.display = "none";
    };

    slides[slideIndex-1].style.display = "block";
}

function toggleImage(id) {
    var image = document.getElementById(id);
    image.style.display = image.style.display == "none" ? "block" : "none";
}

//function toggleBoth() {
//  toggleImage('image1')
//  toggleImage('image2')
//}

function toggleBoth() {
  toggleImage('image1')
  toggleImage('image2')
  toggleImage('image3')
  toggleImage('image4')
}

$(document).ready(function(){
  $(".next").click(function(){
    $("")
  });
});
* {
margin: 0;
padding: 0;
list-style-type:none;
}

body{
  margin: 0;
  font-size: 100%;
/*   background-color: #6E92A1; */
  background-color: #232324;
  height: 100vh;
}

.header {
  overflow: auto;
/*   background-color: #b0d5d0; */
  background-color: #ECAAAC;
}

.logo {
  float: left;
  padding-top: 1em;
/*   padding-bottom: 1em; */
  width: 20%;
  text-align: center;
  font-family: 'Allerta', sans-serif;
  text-transform: uppercase;
 font-weight: 700;
/*   line-height: 50px; */

}

.logo a {
  text-decoration: none;
  font-size: 1em;
  color: black;
}

.nav {
  background-color: #232324;
  padding-top: 1em;
  padding-bottom: 1em;
  width: 80%;
  float: right;
}

li {
  display: inline-block !important;
  border-right: 1px solid #656568;
  padding-right: 1.5em;
  padding-left: 1.5em;
}

li:last-child{
  border-right: none;
}

li a {
  text-decoration: none;
  text-align: center;
  color: white;
  font: normal 62.5% "proxima-nova-alt", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
 font-weight: 700;
 letter-spacing: 1px;
}

li a:hover {
  color: #ECAAAC;
}

.text {
  background-color: black;
  padding: .75em 0 .75em 0;
}

p {
  color: #656568;
  text-align: center;
  font-size: 1em;
  font: italic 80% "proxima-nova-alt", Helvetica, Arial, sans-serif;
}

#slideshow-container{
  position: relative;
  margin: auto;
  background-color: black;
  overflow: hidden;
  padding-bottom: 2.5em;
/*   height: 1000px !important; */
  height: 1000px !important;
}

#slideshow-container img{
  display: block;
  margin: 0 auto;
  max-width: 100%;
  position: relative;
  height: 960px;
}

.myslides {
  position: absolute;
  margin-left: auto;
  margin-right: auto;
  left: 0;
  right: 0;
  opacity: 1;
  -webkit-transition: opacity .5s ease;
  transition: opacity .5s ease;
}

.prev , .next{
  position: absolute;
  top: 50%;
  font-size: 30px;
  font-weight: bold;
  padding: 16px;
  margin-top: -22px;
/*   border-radius: 0 3px 3px 0; */
  color: #fff;
  cursor: pointer;
  z-index: 1;
}

.next{
  right: 0;
/*   border-radius: 3px 0 0 3px; */
}

.prev:hover,.next:hover{
/*   color: #b0d5d0 ; */
/*   background-color: rgba(0,0,0,0.8); */
}

.caption{
  text-align: center;
  position: absolute;
/*   bottom: 6px; */
  width: 100%;
  color: #f2f2f2;
  text-shadow: 2px 2px 4px black;
  font: normal 62.5% "proxima-nova-alt", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
 font-weight: 700;
 letter-spacing: 1px;
  padding-top: 1.25em;
/*   padding-bottom: .75em; */
/*   font-size: 15px; */
/*   padding: 8px 22px; */
}

@media(max-width: 798px) {
  #slideshow-container {
    height: 640px !important;
  }
  #slideshow-container img {
    max-height: 600px !important;
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
  .nav {
    width: 75%;
  }
  .logo {
    width: 25%;
    text-align: center;
  }
 .logo a {
    font-size: .75em;
  }
  li {
    padding-right: .75em !important;
    padding-left: .75em !important;
  }
}
  
@media(max-width: 468px) {
    #slideshow-container {
    height: 440px !important;
  }
  #slideshow-container img{
    max-height: 400px !important;
    display: block;
    margin: 0 auto;
    max-width: 100%;
  }
  .nav {
    width: 65%;
  }
  .logo {
    width: 35%;
    text-align: center;
  }
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!---Images not owned by me --->
<link href="https://fonts.googleapis.com/css?family=Allerta" rel="stylesheet">

<div class="header">
  <div class="logo">
    <a href="">Gabriella Farfan</a>
  </div>
  <div class="nav">
      <ul>
        <li><a href="">Portfolio</a></li>
        <li><a href="">About</a></li>
        <li><a href="">Contact</a></li>
      </ul>
  </div>
</div>



<div id="slideshow-container">
  
<div class="text">
  <p>Click on the image to see the before and after</p>
</div>

  <div class="myslides fade">
    <div><img id="image1" onclick="toggleBoth()"  src="http://www.hestetika.it/wp-content/uploads/2016/10/stevemccurry_5.jpg">
      <img id="image2" onclick="toggleBoth()" style="display:none;" src="https://static.boredpanda.com/blog/wp-content/uploads/2014/12/Top-10-photographers-for-travel-portraits27__700.jpg">
    </div>
      <div class="caption">Text 1</div>
  </div>

  <div class="myslides fade">
    <div><img id="image3" onclick="toggleBoth()" src="https://i.pinimg.com/736x/2f/7a/33/2f7a33e82f03de319faa0663371e2609--interesting-faces-freckles.jpg">
    <img id="image4" onclick="toggleBoth()" style="display:none;" src="http://cdn3.spiegel.de/images/image-945792-galleryV9-buud-945792.jpg">
    </div>
      <div class="caption">Text 2</div>
  </div>

 <div class="myslides fade">
<div><img src="https://media.discordapp.net/attachments/327123793040637952/436369548996902913/nwts_ariana.jpg?width=1050&height=1050"></div>
  <div class="caption">Text 3</div>
  </div>

  <div class="myslides fade">
<div><img src="http://jmacpratt.weebly.com/uploads/1/2/0/1/12013129/portrait2_orig.jpg"></div>
  <div class="caption">Text 4</div>
  </div>

    <a class="prev" onclick="plusSlides(-1)">&#10094;</a>

    <a class="next" onclick="plusSlides(1)">&#10095;</a>

</div>

<br>

