Issues with Javascript

Question

I have been developing this website (First Day)

My javascript for the Beliefs section was working previously, then I changed it because the design changed a little. The javascript is the same except I needed to hide some elements when the page loaded. On a click, depending which word is clicked, that description will show up, and the others (if any were already shown) will disappear. The change I made works on my local machine, but doesn't work on my web server. What could be wrong with my javascript?

Here is the edited code; however, it is still not working

Thanks for any help. This is one I cannot figure out.

Here is the link to the zipped folder of the website. Dropbox Zipped Folder

JavaScript Code:

   $(document).ready(function(){

  $('.Descriptions').hide();

  $('#God').click(function () {

   $('.Descriptions').hide();
   $('#GodDescriptions').show();
 });

  $('#Jesus').click(function () {

   $('.Descriptions').hide();
   $('#JesusDescriptions').show();

  });

  $('#HolySpirit').click(function () {

   $('.Descriptions').hide();
   $('#HolySpiritDescriptions').show();

 });

  $('#Bible').click(function () {

   $('.Descriptions').hide();
   $('#BibleDescriptions').show();

  });

  $('#Man').click(function () {

   $('.Descriptions').hide();
   $('#ManDescriptions').show();

  });

  $('#GodsRelationship').click(function () {

   $('.Descriptions').hide();
   $('#GodsRelationshipDescriptions').show();

  });

  $('#Salvation').click(function () {

   $('.Descriptions').hide();
   $('#SalvationDescriptions').show();

  });

  $('#SavedWho').click(function () {

   $('.Descriptions').hide();
   $('#SavedWhoDescriptions').show();

  });

  $('#Perseverance').click(function () {

   $('.Descriptions').hide();
   $('#PerseveranceDescriptions').show();

  });

  $('#GospelOrd').click(function () {

   $('.Descriptions').hide();
   $('#GospelOrdDescriptions').show();

  });

  $('#Resurrection').click(function () {

   $('.Descriptions').hide();
   $('#ResurrectionDescriptions').show();

  });

  $('#ChurchGov').click(function () {

   $('.Descriptions').hide();
   $('#ChurchGovDescriptions').show();

  });

  $('#SecondComing').click(function () {

   $('.Descriptions').hide();
   $('#SecondComingDescriptions').show();

  });

  $('#Missions').click(function () {

   $('.Descriptions').hide();
   $('#MissionsDescriptions').show();

   });

});

Answer 1

Use .toggle()

This hides an object if visible and makes viable if hidden.

So in your example set things visible or hidden appropriately and then toggle the ones that should be effected by a click.

Also your comment is an HTML comment and is not valid in the context of JavaScript.

<!--Category Logic-->

should be

//Category Logic

or

/*Category Logic*/

This could be causing your problem.

Edit:

I like what mike said about using classes that would make this a million times easier to deal with and read.

Add class="description" to all you extra text and then you can use toggle to do the rest.

EX.

$(".description").hide();

$("#God").click(function(){     
      $(".description:not(#GodDescription)").hide();
      $('#GodDescription').toggle();
    });

This hides everything that isn't the description you want to toggle and then toggles that.

Answer 2

Don't use IDs for toggling visibility of lots of elements. It's unmaintainable, and misses the point of what IDs are for; they're for a unique property when you need to do targeted work (navigate to them, manipulate a single element, etc).

Give all those bits a class attribute with the same class (or if they already have one, give them all the same class as extra class), and the toggle that single class.

<div id="..." class="line"> ...</div>
<div id="..." class="line"> ...</div>
<div id="..." class="line"> ...</div>
<div id="..." class="line"> ...</div>

and then a simple

$(".line").hide();

to hide everything, with

$(".line").hide();
$("#justthatline").show();

to show individual parts