title: onclick function fade in fade out content carousel
body: <p>Evening,</p>
  
  <p>i'm having trouble with onclick fade in and fade out animation on some content
  this is the html script for the navigation:</p>
  
  <pre><code>&lt;div class="col s12 m4"&gt;
  
      &lt;h4 class="pict-menu"&gt;&lt;a href="#!" id="type1" class="waves-effect waves-default"&gt;type1&lt;/a&gt;&lt;/h4&gt;
      &lt;h4 class="pict-menu"&gt;&lt;a href="#!" id="type2" class="waves-effect waves-default"&gt;type2&lt;/a&gt;&lt;/h4&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>and this is the content</p>
  
  <pre><code>&lt;div class="col s12 m8 owl-carousel owl-theme" id="type-1"&gt;
      &lt;?php foreach($regent as $row): ?&gt;
      &lt;div class="item"&gt;&lt;img class="responsive-img" src="&lt;?php echo base_url(); ?&gt;admin/assets/images/media/&lt;?php echo $row-&gt;media_file; ?&gt;" alt="&lt;?php echo $row-&gt;media_title; ?&gt;"&gt;&lt;/div&gt;
      &lt;?php endforeach; ?&gt;
  &lt;/div&gt;
  
  &lt;div class="col s12 m8 owl-carousel owl-theme" id="type-2"&gt;
      &lt;div class="item"&gt;&lt;img class="responsive-img" src="&lt;?php echo base_url(); ?&gt;assets/serenia/images/slide1.jpg" alt=""&gt;&lt;/div&gt;
      &lt;div class="item"&gt;&lt;img class="responsive-img" src="&lt;?php echo base_url(); ?&gt;assets/serenia/images/slide2.jpg" alt=""&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>the javascripts</p>
  
  <pre><code>function type_click() {
      $("#type1").click(function() {
          $("#type-1").fadeIn(300);
          $("#type-2").fadeOut(300);
      });
  
      $("#type2").click(function() {
          $("#type-2").fadeIn(300);
          $("#type-1").fadeOut(300);
      });
  }
  $(function() {type_click()});
  </code></pre>
  
  <p>this is working fine when i'm just using 2 content, but it's not working properly when i tried to use more than 2 content. Would appreciate any help. Thanks in advance.</p>