How to get Jsfiddles working on a website?

Question

Me and friend are working on a website and we couldn't figure out how to get a JSFiddle get working on a webpage.

The problem is, the code is working on JSFiddle, it's working seamlessly. However, when we upload the same thing on our page, we see no action. Below, you can find our fiddle and our page.

This thing is driving us crazy at the moment, we are not sure what we are missing. Fiddle Link: https://jsfiddle.net/n53qg/177/ Fiddle HTML:

<div>
 <a class="link" href="#" data-rel="content1">Link 1</a>
 <a class="link" href="#" data-rel="content2">Link 2</a>
 <a class="link" href="#" data-rel="content3">Link 3</a>
 <a class="link" href="#" data-rel="content4">Link 4</a>
 <a class="link" href="#" data-rel="content5">Link 5</a>
 </div>
 <div class="content-container">
<div id="content1">This is the test content for part 1</div>
<div id="content2">This is the test content for part 2</div>
<div id="content3">This is the test content for part 3</div>
<div id="content4">This is the test content for part 4</div>
<div id="content5">This is the test content for part 5</div>
 </div>

Fiddle JS:

$(".link").click(function(e) {
  e.preventDefault();
  $('.content-container div').fadeOut('slow');
  $('#' + $(this).data('rel')).fadeIn('slow');
});

Fiddle CSS:

 .content-container {
position: relative;
width: 400px;
height: 400px;
 }
 .content-container div {
display: none;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
 }

Our page: http://178.62.254.14/test/denemecik.html

Answer 1

The problem is your script is being executed before the rest of the page is being loaded. You have 2 options:

1. Put your script tags after all of the content (at the end of the body)

2. Wrap your code in a DOM ready function:

   $(document).ready(function() {
       //your code in here
   });
   

By default, JSFiddle code is loaded after the DOM has been processed, hence the reason for it working there and not your site.