title: opening multiple divs with javascript
body: <p>I'm trying to open up a div on the right side, and change the animation div on the same time, that works when I use the same div ID, but that gives me problems with css positions. So when I press 1 the intro animation disappears and the animation div that loads data_1.json appears. </p>
  
  <p><a href="http://bolink.eu/demo/" rel="nofollow noreferrer">http://bolink.eu/demo/</a></p>
  
  <p>Current js code :</p>
  
  <pre><code>&lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    $(document).ready(function(){
          $('a').click(function () {
              var divtitle= this.title;
              $("#"+divtitle).show("slow").siblings().hide(1000);
          });
    });
    &lt;/script&gt;
  
      &lt;script&gt;
          $(function() {
  
              $("#slideshow &gt; div:gt(0)").hide();
  
              setInterval(function() {
                $('#slideshow &gt; div:first')
                  .fadeOut(1000)
                  .next()
                  .fadeIn(1000)
                  .end()
                  .appendTo('#slideshow');
              },  3000);
  
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>Here the rest of the source code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="nl"&gt;
  &lt;head&gt;
  &lt;title&gt;KVL&lt;/title&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;meta name="robots" content="index,follow"&gt;
  
  &lt;style type="text/css"&gt;
  @import url('https://fonts.googleapis.com/css?family=Open+Sans');
  @font-face {
      font-family: Bree;
      src: url(Bree.otf) format("opentype");
  }
  body {
   margin: 0 0 600px;
   font-family: 'Open Sans', sans-serif;
   color:black;
  }
  
  *{
   margin:0;
   padding:0;
  }
  
  a {
   color:#f6f0e3;
   text-decoration:none;
  }
  
  .rhombus{
   width:90px;
   height:90px;
   background:#d5c2f4;
   margin:36px;
   transform:rotate(-45deg);
   float:left;
   font-family: Bree;
  }
  
  .rhombus p{
   transform:rotate(45deg) translate(10px,5px);
   text-align:center;
   font-size: 62px;
   font-family: Bree;
  }
  #footer {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 400px;
      width: 100%;
      text-align:center;
  }
  div.rechts {
      color:black;
      position: absolute;
      right: 200px;
      top: 150px;
      margin-right: 30px;
      width: 500px;
      text-align: justify;
      font-size: 24px;
  }
  h1 {
      font-family: Bree;
      font-size: 64px;
  }
  .bodymovin {
      background-color:white;
      width: 800px;
      height:500px;
      display:block;
      overflow: hidden;
      transform: translate3d(0,0,0);
      margin: 20px;
      position: absolute;
      top: 10px;
      left: 10px;
  }
  p.titel {
      font-style: italic;
      margin-bottom: 30px;
      margin-top: 30px;
  }
  a.meer {
      font-family: Bree;
      font-size: 40px;
  }
  p.onder {
      text-align: center;
      margin: 50px;
  }
  
  
  &lt;/style&gt;
  &lt;script src="bodymovin.js"&gt;&lt;/script&gt;
  &lt;script src="http://code.jquery.com/jquery-latest.js"&gt;&lt;/script&gt;
    &lt;script&gt;
    $(document).ready(function(){
          $('a').click(function () {
              var divtitle= this.title;
              $("#"+divtitle).show("slow").siblings().hide(1000);
          });
    });
    &lt;/script&gt;
  
      &lt;script&gt;
          $(function() {
  
              $("#slideshow &gt; div:gt(0)").hide();
  
              setInterval(function() {
                $('#slideshow &gt; div:first')
                  .fadeOut(1000)
                  .next()
                  .fadeIn(1000)
                  .end()
                  .appendTo('#slideshow');
              },  3000);
  
          });
      &lt;/script&gt;
  
  &lt;/head&gt;&lt;body&gt;
  
  
   &lt;div id="footer"&gt;
   &lt;a href="#" title="content1"&gt;&lt;div class="rhombus" style="background-color: #DCCD00;"&gt;&lt;p&gt;1&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
   &lt;a href="#" title="content2"&gt;&lt;div class="rhombus" style="background-color: #EDA400;"&gt;&lt;p&gt;2&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
   &lt;a href="#" title="content3"&gt;&lt;div class="rhombus" style="background-color: #39AA36;"&gt;&lt;p&gt;3&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
   &lt;a href="#" title="content4"&gt;&lt;div class="rhombus" style="background-color: #3AA8DD;"&gt;&lt;p&gt;4&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
   &lt;a href="#" title="content5"&gt;&lt;div class="rhombus" style="background-color: #00A79F;"&gt;&lt;p&gt;5&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
   &lt;a href="#" title="content6"&gt;&lt;div class="rhombus" style="background-color: #808080;"&gt;&lt;p&gt;6&lt;/p&gt;&lt;/div&gt;&lt;/a&gt;
  &lt;/div&gt;
  
  
  
  
  &lt;div&gt;
  &lt;div id="content1" class="rechts" style="display: none"&gt;
    &lt;h1 style="color: #DCCD00;"&gt;Data Strategy&lt;/h1&gt;
    &lt;p class="titel"&gt;Identificeren van kansen door beter datagebruik.&lt;/p&gt;
    &lt;p class="verhaal"&gt;Met een quick scan identificeren we de mogelijkheden om met analytics de omzet en winst te laten groeien en prestaties verder te verbeteren. Vervolgens bepalen we samen met stakeholders een roadmap. Daarin leggen we vast hoe we relevante data in de organisatie optimaal identificeren, verzamelen, opslaan, beheren, delen en gebruiken.&lt;/p&gt;
    &lt;p class="onder"&gt;&lt;a class="meer" style="color: #DCCD00;" href="#"&gt;Lees meer&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="content2" class="rechts" style="display: none"&gt;
    &lt;h1 style="color: #EDA400;"&gt;Data Economy&lt;/h1&gt;
    &lt;p class="titel"&gt;Versterken van data-ecosystemen&lt;/p&gt;
    &lt;p class="verhaal"&gt;Met pragmatische en schaalbare data-engineering helpen wij om bestaande en nieuwe data slim te structureren en op te slaan. Zodat alle betrokkenen in een organisatie de data eenvoudig kunnen vinden en gebruiken.&lt;/p&gt;
    &lt;p class="onder"&gt;&lt;a class="meer" style="color: #EDA400;" href="#"&gt;Lees meer&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="content3" class="rechts" style="display: none"&gt;
    &lt;h1 style="color: #39AA36;"&gt;Business Intelligence&lt;/h1&gt;
    &lt;p class="titel"&gt;Ontsluiten van relevante business-informatie&lt;/p&gt;
    &lt;p class="verhaal"&gt;We gaan op zoek naar de toegevoegde waarde van gecombineerde bedrijfsdata. Hierbij gebruiken we geavanceerde data-analytics en data-visualisatie oplossingen, die bruikbaar zijn voor zowel data-experts en gewone gebruikers in uw organisatie.&lt;/p&gt;
    &lt;p class="onder"&gt;&lt;a class="meer" style="color: #39AA36;" href="#"&gt;Lees meer&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="content4" class="rechts" style="display: none"&gt;
    &lt;h1 style="color: #3AA8DD;"&gt;Business Impact&lt;/h1&gt;
    &lt;p class="titel"&gt;Cre&amp;euml;ren van nieuwe inzichten&lt;/p&gt;
    &lt;p class="verhaal"&gt;Van data naar inzicht. Met state-of-the-artmodellen en -benaderingen ondersteunen wij gebruikers op alle niveaus in uw organisatie om op een intu&amp;iuml;tieve manier nieuwe inzichten voor uw business te genereren. Waar nodig combineren we uw data met de business-kennis binnen uw bedrijf.&lt;/p&gt;
    &lt;p class="onder"&gt;&lt;a class="meer" style="color: #3AA8DD;" href="#"&gt;Lees meer&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="content5" class="rechts" style="display: none"&gt;
    &lt;h1 style="color: #00A79F;"&gt;Business Analytics&lt;/h1&gt;
    &lt;p class="titel"&gt;Implementeren van slimme actie voor business value&lt;/p&gt;
    &lt;p class="verhaal"&gt;Wij helpen uw medewerkers om nieuwe verkregen inzichten door te vertalen in concrete groei- en verbeteracties. Ook monitoren we de impact hiervan op uw business. Zo laten wij uw medewerkers ervaren hoe een juist gebruik van data een groot verschil kan maken voor uw business.&lt;/p&gt;
    &lt;p class="onder"&gt;&lt;a class="meer" style="color: #00A79F;" href="#"&gt;Lees meer&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="content6" class="rechts" style="display: none"&gt;
    &lt;h1 style="color: #808080;"&gt;KVL Academy&lt;/h1&gt;
    &lt;p class="titel"&gt;Kennis vergroten is kennis delen.&lt;/p&gt;
    &lt;p class="verhaal"&gt;Daarom investeren we in de ontwikkeling van onze eigen collega's. En trainen we de medewerkers van onze opdrachtgevers. Op alle domeinen binnen ons vakgebied. Ook bouwen we aan een nieuwe generatie data-experts met ons programma Scherp Talent.&lt;/p&gt;
    &lt;p class="onder"&gt;&lt;a class="meer" style="color: #808080;" href="#"&gt;Lees meer&lt;/a&gt;&lt;/p&gt;
  &lt;/div&gt;
  
  &lt;div id="ani0" class="bodymovin"&gt;&lt;/div&gt;
  &lt;script&gt;
      var anim;
      var elem = document.getElementById('ani0')
      var animData = {
          container: elem,
          renderer: 'svg',
          loop: false,
          autoplay: true,
          rendererSettings: {
              progressiveLoad:false
          },
          path: 'data_intro.json'
      };
      anim = bodymovin.loadAnimation(animData);
  &lt;/script&gt;
  
  &lt;div class="bodymovin" id="content1" style="display:none"&gt;&lt;/div&gt;
  &lt;script&gt;
      var anim;
      var elem = document.getElementById('content1')
      var animData = {
          container: elem,
          renderer: 'svg',
          loop: false,
          autoplay: true,
          rendererSettings: {
              progressiveLoad:false
          },
          path: 'data_1.json'
      };
      anim = bodymovin.loadAnimation(animData);
  &lt;/script&gt;
  
  &lt;div id="content2" style="display:none" class="bodymovin"&gt;&lt;/div&gt;
  &lt;script&gt;
      var anim;
      var elem = document.getElementById('content2')
      var animData = {
          container: elem,
          renderer: 'svg',
          loop: false,
          autoplay: true,
          rendererSettings: {
              progressiveLoad:false
          },
          path: 'data_2.json'
      };
      anim = bodymovin.loadAnimation(animData);
  &lt;/script&gt;
  
  &lt;div  id="content3" style="display:none" class="bodymovin"&gt;&lt;/div&gt;
  &lt;script&gt;
      var anim;
      var elem = document.getElementById('content3')
      var animData = {
          container: elem,
          renderer: 'svg',
          loop: false,
          autoplay: true,
          rendererSettings: {
              progressiveLoad:false
          },
          path: 'data_3.json'
      };
      anim = bodymovin.loadAnimation(animData);
  &lt;/script&gt;
  
  &lt;div id="content4" style="display:none" class="bodymovin"&gt;&lt;/div&gt;
  &lt;script&gt;
      var anim;
      var elem = document.getElementById('content4')
      var animData = {
          container: elem,
          renderer: 'svg',
          loop: false,
          autoplay: true,
          rendererSettings: {
              progressiveLoad:false
          },
          path: 'data_4.json'
      };
      anim = bodymovin.loadAnimation(animData);
  &lt;/script&gt;
  
  &lt;div id="content5" style="display:none" class="bodymovin"&gt;&lt;/div&gt;
  &lt;script&gt;
      var anim;
      var elem = document.getElementById('content5')
      var animData = {
          container: elem,
          renderer: 'svg',
          loop: false,
          autoplay: true,
          rendererSettings: {
              progressiveLoad:false
          },
          path: 'data_5.json'
      };
      anim = bodymovin.loadAnimation(animData);
  &lt;/script&gt;
  
  &lt;div id="content6" style="display:none" class="bodymovin"&gt;&lt;/div&gt;
  &lt;script&gt;
      var anim;
      var elem = document.getElementById('content6')
      var animData = {
          container: elem,
          renderer: 'svg',
          loop: false,
          autoplay: true,
          rendererSettings: {
              progressiveLoad:false
          },
          path: 'data_6.json'
      };
      anim = bodymovin.loadAnimation(animData);
  &lt;/script&gt;
  &lt;/div&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Hope someone can help! </p>