0

On my website I have a slideToggle div that contains some images, very big. When this div opens, I need the images to slideIn one by one when entering the viewport.

With my code, the div opens, but then the images slide in all at the same time (as if they were a single block).

But if I remove "display: none;" from my slideToggle div and I leave it open as a starting point, the script works perfectly.

I was wondering if "display: none;" somehow ignores the div's position to the viewport.

This is the slideToggle script I am using (if it helps): https://jsfiddle.net/5efuhytm/

Krupal Panchal
  • 1,553
  • 2
  • 13
  • 26
Erikamyself
  • 263
  • 1
  • 13
  • I think this should answer your question - https://stackoverflow.com/questions/133051/what-is-the-difference-between-visibilityhidden-and-displaynone – JakeKempo Nov 16 '19 at 10:58
  • Please [edit] your question to include all code needed to reproduce the issue you are seeing (an [mre]). You can use [Stack Snippets](https://meta.stackoverflow.com/q/358992/215552) to do so. – Heretic Monkey Nov 16 '19 at 15:20
  • 1
    `display: none` removes the element from the flow of the document, including calculations of size and position. – Heretic Monkey Nov 16 '19 at 15:22

2 Answers2

1

Instead of 

display: none;

Use

 visibility: hidden;

This is because display: none will remove the entire dom element from the document. Whereas visibility: hidden will just hide the dom element. In this case, if you don't want to change the viewport hide go with the visibility property.

Refer this for more details, https://stackoverflow.com/a/133064/7544289

Hope this helps!

sabitha kuppusamy
  • 96
  • 1
  • 4
0

Change the CSS remove display:none in #show-images:


/*Panel that slides open*/
#show-images
{

    color: #FFF;
    padding: 0;
    width: 150px;

}

And add this code (because what you want to hide is just Image.)

#show-images img
{
   display: none;
}

Change the JS adding #show-images img

$(function()
  {
     $("a#toggle").click(function()
          {
           $("#show-images img").slideToggle(800);
           $("#toggle").toggleClass("fade");
            return false;
            });
  });
Firdaus Rudy
  • 21
  • 1