title: Fade in and out two elements
body: <p>I'm trying to fade in and fade out multiple elements when a button is clicked.</p>
  <p>For example.</p>
  <p>When <code>item1</code> is clicked then it should fade in <code>first</code> and fade out <code>second</code></p>
  <h3><a href="https://jsfiddle.net/75usquoL/" rel="nofollow noreferrer">Example Fiddle</a></h3>
  <p><strong>Code:</strong></p>
  <pre><code>&lt;div id=&quot;menu&quot; class=&quot;menu&quot;&gt;
          &lt;ul class=&quot;headlines&quot;&gt;
               &lt;li id=&quot;item1&quot;onclick=&quot;checklist(this)&quot;&gt;&lt;button onclick=&quot;myFunction()&quot;&gt;A&lt;/button&gt;&lt;/li&gt;
              &lt;li id=&quot;item2&quot;&gt;&lt;button onclick=&quot;myFunction2()&quot;&gt;B&lt;/button&gt;&lt;/li&gt;
              
          &lt;/ul&gt;
          &lt;/div&gt;
  
  &lt;div id=&quot;first&quot;&gt;
  &lt;img id=&quot;image1&quot; src=&quot;https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=350%C3%97150&amp;w=350&amp;h=150&quot;/&gt;
  &lt;img id=&quot;image2&quot; src=&quot;https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=350%C3%97150&amp;w=350&amp;h=150&quot;/&gt;
  &lt;img id=&quot;image3&quot; src=&quot;https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=350%C3%97150&amp;w=350&amp;h=150&quot;/&gt;
  &lt;img id=&quot;image4&quot; src=&quot;https://placeholdit.imgix.net/~text?txtsize=33&amp;txt=350%C3%97150&amp;w=350&amp;h=150&quot;/&gt;
  &lt;/div&gt;
        
  
          &lt;div id=&quot;second&quot;&gt;
          This is my DIV2 element.
      &lt;/div&gt;
  
  &lt;script&gt;
   function myFunction() {
      $(&quot;#second&quot;).fadeOut(2000, function(){
          $(&quot;first&quot;).fadeIn(6000);
      });
  }
  &lt;script/&gt;
  
  &lt;script&gt;
     function myFunction2() {
      $(&quot;first&quot;).fadeOut(2000, function(){
          $(&quot;#second&quot;).fadeIn(6000);
      });
  }
  &lt;script/&gt;
  </code></pre>
  <p>CSS:</p>
  <pre><code>li{
      list-style-type: none;
      font-size: 1.5em;
      height: 40px;
      width: 180px;
      text-align:right;    
      border-style: none;
      
  }
  
  .menu{
  
      width:150px;
      height: 350px;
   
     }
  
  .menu li{  
  position: relative;
    top:150px; 
    bottom: 0;
    left: 695px;
    right:0;
    margin: auto; 
    border-style:none;
      
  }
  
  #second {
              width: 500px;
              height: 500px;
              background-color: lightblue;
              display: none;
          }
  
  #first
  {
      width: 500px;
              height: 500px;
      background-color: red;
              display: none;
  }
  </code></pre>