title: Making a div appear and disappear
body: <p>I have 8 thumbnail pictures and I want to make a slider appear when I click on one of them. I tried pretty much everything I know and here it is:</p>
  <p>HTML:</p>
  <pre><code>&lt;div id=&quot;divThumbnails2&quot; class=&quot;thumbnails2&quot;&gt;
      &lt;a href=&quot;#&quot; id=&quot;Thumb5&quot; &gt;
          &lt;img src=&quot;images/thumbnail_5.png&quot; width=&quot;55&quot; height=&quot;66&quot; alt=&quot;&quot; class=&quot;floatleft&quot; /&gt;&lt;/a&gt;
      &lt;a href=&quot;#&quot; id=&quot;Thumb6&quot;&gt;
          &lt;img src=&quot;images/thumbnail_6.png&quot; width=&quot;56&quot; height=&quot;67&quot; alt=&quot;&quot; class=&quot;floatleft&quot;
                  style=&quot;margin-left: 7px;&quot; /&gt;&lt;/a&gt;
      &lt;a href=&quot;#&quot; id=&quot;Thumb7&quot;&gt;
          &lt;img src=&quot;images/thumbnail_7.png&quot; width=&quot;54&quot; height=&quot;66&quot; alt=&quot;&quot; class=&quot;floatleft&quot;
                  style=&quot;margin-left: 7px;&quot; /&gt;&lt;/a&gt;
      &lt;a href=&quot;#&quot; id=&quot;Thumb8&quot;&gt;
          &lt;img src=&quot;images/thumbnail_8.png&quot; width=&quot;57&quot; height=&quot;68&quot; alt=&quot;&quot; class=&quot;floatleft&quot;
                  style=&quot;margin-left: 7px;&quot; /&gt;&lt;/a&gt;
  &lt;/div&gt;
  &lt;div id=&quot;divThumbnails&quot; class=&quot;thumbnails&quot;&gt;
      &lt;div id=&quot;Thumb1&quot; class=&quot;floatleft&quot; &gt;
          &lt;a href=&quot;#&quot;&gt;
              &lt;img src=&quot;images/thumbnail_1.png&quot; width=&quot;54&quot; height=&quot;65&quot; alt=&quot;&quot;/&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id=&quot;Thumb2&quot; class=&quot;floatleft&quot; style=&quot;margin-left: 7px;&quot; &gt;
          &lt;a href=&quot;#&quot;&gt;
              &lt;img src=&quot;images/thumbnail_2.png&quot; width=&quot;56&quot; height=&quot;66&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div id=&quot;Thumb3&quot; class=&quot;floatleft&quot; style=&quot;margin-left: 7px;&quot; &gt;
          &lt;a href=&quot;#&quot;&gt;
              &lt;img src=&quot;images/thumbnail_3.png&quot; width=&quot;54&quot; height=&quot;66&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;div class=&quot;floatleft&quot; style=&quot;margin-left: 7px;&quot; id=&quot;Thumb4&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;
              &lt;img src=&quot;images/thumbnail_4.png&quot; width=&quot;57&quot; height=&quot;68&quot; alt=&quot;&quot;  /&gt;&lt;/a&gt;
      &lt;/div&gt; 
  &lt;/div&gt;
  </code></pre>
  <p>And the slides:</p>
  <pre><code>&lt;div id=&quot;slides&quot;&gt;
      &lt;div class=&quot;slides_container&quot; id=&quot;SlidesContainer&quot;&gt;
          &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/slides_1.png&quot; width=&quot;408&quot; height=&quot;266&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/slides_2.png&quot; width=&quot;408&quot; height=&quot;272&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
          &lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/slides_3.png&quot; width=&quot;408&quot; height=&quot;275&quot; alt=&quot;&quot; /&gt;&lt;/a&gt;
      &lt;/div&gt;
      &lt;a class=&quot;prev&quot; href=&quot;#&quot;&gt;&lt;img width=&quot;28&quot; height=&quot;27&quot; alt=&quot;Arrow Prev&quot; src=&quot;images/slides_left_arrow.png&quot;/&gt;&lt;/a&gt;
      &lt;a class=&quot;next&quot; href=&quot;#&quot;&gt;&lt;img width=&quot;28&quot; height=&quot;27&quot; alt=&quot;Arrow Next&quot; src=&quot;images/slide_arrow_right.png&quot;/&gt;&lt;/a&gt;
      &lt;div class=&quot;close_btn&quot; id=&quot;Btn_Close&quot;&gt;&lt;a href=&quot;#&quot;&gt;&lt;img src=&quot;images/slide_close_btn.png&quot; width=&quot;28&quot; height=&quot;27&quot; alt=&quot;Close&quot; /&gt;&lt;/a&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>The JavaScript:</p>
  <pre><code>&lt;script type=&quot;text/javascript&quot;&gt;
  
       
      var close = document.getElementById('Btn_Close');
      var slides = document.getElementById('slides');
      close.onclick = function () {
  
          slides.style.display = &quot;none&quot;;
      };
  &lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
  
      var thumb1 = document.getElementById('Thumb1');
      var slides = document.getElementById('slides');
      thumb1.onclick = function () {
              
          slides.style.display = &quot;block&quot;;
      };
  &lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
      var thumb2 = document.getElementById('Thumb2');
      var slides = document.getElementById('slides');
      thumb2.onclick = function () {
             
          slides.style.display = &quot;block&quot;;
      };
  &lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
      var thumb3 = document.getElementById('Thumb3');
      var slides = document.getElementById('slides');
      thumb3.onclick = function () {
            
          slides.style.display = &quot;block&quot;;
      };
  &lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
      var thumb4 = document.getElementById('Thumb4');
      var slides = document.getElementById('slides');
      thumb4.onclick = function () {
             
          slides.style.display = &quot;block&quot;;
      };
  &lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
      var thumb5 = document.getElementById('Thumb5');
      var slides = document.getElementById('slides');
      thumb5.onclick = function () {
          
          slides.style.display = &quot;block&quot;;
      };
  &lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
      var thumb6 = document.getElementById('Thumb6');
      var slides = document.getElementById('slides');
      thumb6.onclick = function () {
          
          slides.style.display = &quot;block&quot;;
      };
  &lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
      var thumb7 = document.getElementById('Thumb7');
      var slides = document.getElementById('slides');
      thumb7.onclick = function () {
          
          slides.style.display = &quot;block&quot;;
      };
  &lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
      var thumb8 = document.getElementById('Thumb8');
      var slides = document.getElementById('slides');
      thumb8.onclick = function () {
          
          slides.style.display = &quot;block&quot;;
      };
  
  &lt;/script&gt;
  </code></pre>
  <p>Everything's fine with the slides_container when I click my arrows it changes my picture but I have to initially set its display property to &quot;block&quot; and I want to set it to 'none' because I want it to appear only when I click on one of the thumbnail pictures.</p>
  <p>It works with the close button when I click on it the <code>slides_container</code> div disappears (I guess I'm doing something right) but I can't seem to get it to appear when I click on the others. Any help is appreciated.</p>