I am working with some code that works fine in jsfiddle but not locally, here is the jsfiddle link

this is quite confusing

here is the local code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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 type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script  type="text/javascript">

$("input[type=radio]").click(function(event) {
    var myId = this.id;
    var targetId = myId + "_div";
    $("div.choice:not(#" + targetId + ")").addClass(".none");
    $("#" + targetId).removeClass(".none");
});
</script>


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

</style>
</head>

<body>

<input type="radio" name='thing' value='valuable' data-id="bank" />Running Event
<input type="radio" name='thing' value='valuable' data-id="school" />Other challenges
<div id="school" class="none">
<label for="name">What was the activity called?</label>
                <select id = "myList">
               <option value = "1">Virgin London Marathon</option>
               <option value = "2">Round the Island cycle challenge</option>
               <option value = "3">Kilimanjaro trek</option>
               <option value = "4">Thames Path Challenge</option>
             </select>


</div>
<div id="bank" class="none"><label for="name">What was the activity called?</label>
                <select id = "myList">
               <option value = "1">Pancake Making</option>
               <option value = "2">Egg and spoon race</option>
               <option value = "3">Sack race </option>
               <option value = "4">Three leg race</option>
             </select></div>

</body>
</html>

Could be an issue with a local firewall or something in regards to accessing JQuery. Have you considered adding the .mis.js file locally and trying again? It's a weak reponse and I apologise for that but it's all I can think of at this moment in time.

Yeah i did its absolutley baffling me, thanks mate.

For starters have you noted that you are not using the jQuery versions are different (1.10.2 on your local site and 1.10.1 on JSFiddle). That apart have you checked your browser console for potentially useful error messages? Not sure what browser you use - personally I would use Chrome since its debugging tools are absolutely first rate.

How about not trying to attach events to elements before they are created?!
Put the script that manipulates the DOM where it belongs: towards the end of the document body.

(the working code)

<!DOCTYPE html>
<html>
<head>

<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

<style>
.none {
    display:none;
}
</style>
</head>

<body>
<input type="radio" name='thing' value='valuable' data-id="bank" />Running Event
<input type="radio" name='thing' value='valuable' data-id="school" />Other challenges
<div id="school" class="none">
<label for="name">What was the activity called?</label>
                <select id = "myList">
               <option value = "1">Virgin London Marathon</option>
               <option value = "2">Round the Island cycle challenge</option>
               <option value = "3">Kilimanjaro trek</option>
               <option value = "4">Thames Path Challenge</option>
             </select>


</div>
<div id="bank" class="none"><label for="name">What was the activity called?</label>
                <select id = "myList">
               <option value = "1">Pancake Making</option>
               <option value = "2">Egg and spoon race</option>
               <option value = "3">Sack race </option>
               <option value = "4">Three leg race</option>
             </select></div>
<script>

$(':radio').change(function (event) {
    var id = $(this).data('id');
    $('#' + id).addClass('none').siblings().removeClass('none');
});
</script>
</body>
</html>
commented: nods +14

This lookes to be working fine now thanks TroyIII

In some crucial coding scenarios, jQuery neglects our need to be giving error feedback, moreover it leans towards suppressing them completely, which is wrong!

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.