CODEWITHSUNDEEP
javascript
Rita Ferreira
Rita Ferreira

Reputation: 45

Hiding slideshow on click

I'm trying to hide a slideshow when a X button is clicked, but it is not working. I'm not sure if it has anything to do with the "id" or "class", but I've tried everything already and it is not hiding what I want it to. (can't use Jquery, this is for a little school project). I usually can hide everything using that button and function, but I can't make it work with the slideshow.

<div id="slideshow-container">
  <a class="prev" onclick="plusSlides(-1)">&#10094;</a>
  <a class="next" onclick="plusSlides(1)">&#10095;</a>

 <button id="exit" onclick="hideSlides(this, 'slideshow-container')">
  <img id="exit" src="image/exit.png">
 </button>

  <div class="mySlides fade">
    <img src="image/remar1.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar2.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar3.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar4.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar5.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar6.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar7.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/remar8.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa1.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa2.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa3.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa4.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa5.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa6.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/casa7.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose1.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose2.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose3.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose4.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose5.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose6.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose7.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose8.jpg" style="width:100%">
  </div>

  <div class="mySlides fade">
    <img src="image/jose9.jpg" style="width:100%">
  </div>

  </div>


//javascript
  function hideSlides(){
  var slides = 
  document.getElementsByClassName("mySlides").style.display="none"

  }

//css
  .mySlides {
  display: none;
  visibility: visible;
  }
  img {vertical-align: middle;}


  #slideshow-container {
  max-width: 1000px;
  height: 200px;
  left: 10px;
  position: relative;
  margin: auto;
  bottom: 1932px;
  visibility: hidden;
  }


 .prev, .next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -22px;
  color: black;
  font-weight: bold;
  font-size: 18px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;

  }

Upvotes: 0

Views: 257

Answers (2)

EhsanT
EhsanT

Reputation: 2085

document.getElementsByClassName returns a HTMLCollection. So with your current HTML design, you have to iterate over all the selected elements and apply the style you want.

With ES6, you may use Array.from which builds arrays from array-like objects.
You can find the documentation of Array.from here

So you can change your function like this:

function hideSlides(){
    var slides = document.getElementsByClassName("mySlides");
    Array.prototype.forEach.call(slides, function(el) {
        el.style.display = 'none';
    });
}

Upvotes: 1

MHart1000
MHart1000

Reputation: 21

is hideSlides() the function called when you click x? Try declaring the variable, then adding the style:

function hideSlides(){
    var slides = document.getElementsByClassName("mySlides")
    slides.style.display="none"  
}

And in case you want to get rid of the empty space where it was, you will need to change the visibility as well.

Upvotes: 0

Related Questions