-1

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();

   });

});
Improve this question
5
  • "doesn't work on my web server" - in what way does it not work? Are any errors being printing in the console? Commented Sep 29, 2014 at 23:55
  • 1
    <!-- --> comments are only valid in HTML, they are not valid in Javascript. You can comment in javascript using // for one line or /* */ for multiple lines. Commented Sep 30, 2014 at 0:01
  • Are you sure Jquery is loaded on the page? Also are you getting any Javascript errors in your web console? If you are that could stop all of this from loading and there for it will never run. Commented Sep 30, 2014 at 0:23
  • Yeah, jQuery is being loaded. Here is the line <script src="js/jquery.min.js"></script>. There are no errors in the console, just warnings related to a couple things in the HTML file. Commented Sep 30, 2014 at 0:29
  • Hm. Well the only other thing I can think of is that you're using unbind("click") somewhere else and that's removing the click bindings you have above. Can you add an alert to the onclick and document ready functions to see if it's being triggered? As an after thought what browser are you testing this with? Commented Sep 30, 2014 at 0:35

2 Answers 2

Reset to default
3

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

Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

I've updated my code to include this type of design. However, it still isn't working, nothing is showing up when they words are clicked.
the updated code in your question is still amazingly unmaintainable. It'll help if you recreate your content as a jsbin or jsfiddle so we can see what you're actually working with, and recommend a concrete fix and possible code improvements.
dropbox.com/s/bcotzni6xqtrlgc/Site.zip?dl=0 Here is a link to the zipped folder in Dropbox. This is really the best I can do
unfortunately that best is not good enough. I'm not going to download a zip file and run it locally (because I have time to go through a jsbin, but more time than that and I'd better get paid), you'll have to come up with a reduced working example of what you're doing (and if you can't, that's an indication you have a much large problem);
0

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.

Improve this answer

1 Comment

HTML comments actually are (regrettably, but nevertheless) valid JavaScript.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.