title: Show/hide and slider conflict
body: <p>A few days ago I asked a question regarding a show/hide div script that I had problems with.</p>
  
  <p><a href="https://stackoverflow.com/questions/32246297/js-show-hide-default-behavior">JS show/hide default behavior</a></p>
  
  <p>Tested all the solutions and nothing seemed to work on my website (they all work in fiddles or different areas of the website than the one I need it in). The problem is that inside the show/hide divs I have a slider. There are 4 tabs, each showing a different slider. My best guess is that the problem appears because both the slider and the show/hide use the same display:none, altering the slider's content.</p>
  
  <p>Here's the JS that I currently have for the show/hide:</p>
  
  <pre><code>window.addEventListener("hashchange", function () {
      var targetDiv = $(location.hash);
      if (!targetDiv.is(':visible')) {
          $('.page1').slideUp();
          targetDiv.slideDown();
      } else {
          $('.page1').slideUp();
      }
  }, false);
  </code></pre>
  
  <p>The slider I use is called Flickity and it's link is; <a href="https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.js" rel="nofollow noreferrer">https://cdnjs.cloudflare.com/ajax/libs/flickity/1.1.0/flickity.pkgd.js</a></p>
  
  <p>The link of the live website is:
  <a href="http://theworkshop.ro/astra3/" rel="nofollow noreferrer">http://theworkshop.ro/astra3/</a></p>
  
  <p>Here's the fiddle of the show/hide: <a href="http://jsfiddle.net/s9cxjrmf/" rel="nofollow noreferrer">http://jsfiddle.net/s9cxjrmf/</a> (currently the .page css is commented to show all 4 show sliders, if I add display none as it is in the fiddle it doesn't work anymore, it only shows the arrows of the slider, not it's content)</p>
  
  <p>The problem is in the Work section of the website.</p>
  
  <p>I'm struggling for a few days, any idea how to solve this problem?</p>