JS is working in JSFiddle not in Real File [closed]

Question 1

Copy and paste the below code it will work

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>


<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>


<script type="text/javascript" >
$(document).ready(function() {

    $('.trigger').click(function() {
        $('.content').hide();
        $('.' + $(this).data('rel')).show();
    });
});
</script>

<style type="text/css">
.content {
    display: none;
}
</style>


</head>
<body>

<form id='group'>
    <label>
        <input type="radio" name="group1" class="sim-micro-btn trigger" data-rel="sim-micro-desktop" />
    </label>
    <label>
        <input type="radio" name="group1" class="sim-mini-btn trigger" data-rel="sim-mini-desktop" />
    </label>
    <label>
        <input type="radio" name="group1" class="sim-maxi-btn trigger" data-rel="sim-maxi-desktop" />
    </label>
    <label>
        <input type="radio" name="group1" class="sim-mega-btn trigger" data-rel="sim-mega-desktop" />
    </label>
        <input type="radio" name="group1" class="sim-mega-btn trigger" data-rel="sim-mega-desktop" />
    </label>
</form>

<div class="billpay-internet-add-ons">
    <div class="sim-micro-desktop content">sim-micro</div>
    <div class="sim-mini-desktop content">sim-mini</div>
    <div class="sim-maxi-desktop content">sim-maxi</div>
    <div class="sim-mega-desktop content">sim-mega</div>
</div>


</body>
</html>

Question 2

jquery file path may be a problem ,so use the jQuery CDN

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

and the data-* attributes are new in HTML5. so try to use declaration as <!DOCTYPE html>

Question 3

To add on to Manoj's answer, the problem is most definitely because you specified an incorrect filepath, since the CDN version fixed your problem.

If you like, you can use the CDN version that Manoj provided, but keep in mind if you would like to include a local copy, that is always an option.

In your head, you have:

<script type="text/javascript" src="qtip/jquery-2.0.3.min.js"></script>

In order for this to work, your filetree would need to look like this

enter image description here

this is because you are specifying a relative path from your document, so any folder requested will start out in the same folder as the html file it is included in. I'm willing to be this is not the case with your server, and that you have the qtip folder somewhere else

In order to set up an absolute path you should lead your file location with a / to specify a root folder to start from.

For instance, if you had a setup like the following,

enter image description here

you would get the jquery file through an absolute path with /qtip/jquery-2.0.3.min.js This is a good practise to get into, especially when naming commonly used files like jquery, so you don't need to specify a different path for each html document.