Whats wrong in my First Jquery Code

[codeispoetry]

I learned Jquery today and decided to apply it.

Live Link

$( ".spinner-form" ).click(function () {
  if ( $( ".main-nav" ).is( ":hidden" ) ) {
    $( ".main-nav" ).slideDown( "fast" );
  } else {
    $( ".main-nav" ).slideUp("fast");
  }
});

why is this code not executing and why it is unable to bring a drop down menu?

with my little knowledge I was trying to play around with the classes.

[Dormilich]

your jQuery file does not load:

Failed to load resource: the server responded with a status of 500 (Internal Server Error)

[codeispoetry]

@Dormilich

your jQuery file does not load:

Is there any flaw in this → <script src="js/jquery-3.1.1.js" charset="utf-8"></script>

jquery is residing in a js folder.

[Dormilich]

@Novicedeveloper

Is there any flaw in this

no. it’s just that your server doesn’t deliver the file.

and no, I don’t know why.

[codeispoetry]

@Dormilich

no. it’s just that your server doesn’t deliver the file.

and no, I don’t know why.

I have reuploaded and its working for me, but still the same issue.

<input type="checkbox" id="spinner-form" />

Could this be related to “id” or “class” issue.

[Dormilich]

you define the click handler on the class ‘spinner-form’, but you do not have such a class. instead you have it as id. hence the code does not find any element with that class it could attach the handler to.

[codeispoetry]

@Dormilich

you define the click handler on the class ‘spinner-form’, but you do not have such a class. instead you have it as id. hence the code does not find any element with that class it could attach the handler to.

actually I tried that also, but didnt worked.

I have readded this class, but still nothing works →
<input type="checkbox" id="spinner-form" class="spinner-form" />

ID + CLASS now with the same name.

[codeispoetry]

@Dormilich

any element with that class it could attach the handler to

Could not fix even striving for hours. please help!

[Dormilich]

you try to assign the event handler before the element exists. (at the point where you call the js, none of the body is rendered).

[codeispoetry]

@Dormilich

you try to assign the event handler before the element exists. (at the point where you call the js, none of the body is rendered).

You was right as soon as I loaded them just above the end of the </body> things worked.

I started to learn Jquery in the morning, and by the end of the day I am able to make a working drop down Jquery mobile menu. It was a good day and your help was crucial. Here is the live version of the working Jquery Menu → Thank you so much for your immediate help.