jQuery is not changing the function of my HTML

Hi there,

I have made a web page about the default HTML tags as part of some HTML tutorials that I am working on.

My page should, when you click next, reveal the next part of text, and when you get to the end of the tutorial, this next link should hide and the one that takes you to the next tutorial show. Attached is my jQuery and HTML code.

Thanks

The Code:

<HTML>
<HEAD>
<TITLE>Coding Kids HTML Tutorial</TITLE>
<link href='https://fonts.googleapis.com/css?family=Raleway' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$(function(){
         $("#next").show();
         $("#text1").fadeIn("slow");
         $("#text2").hide();
$("#text3").hide();
$("#text4").hide();
$("#text5").hide();
$("#text6").hide();
$("#text7").hide();
$("#text8").hide();
$("#text9").hide();
$("#text10").hide();
         $("#next").click(function(){
             $("#next").show()
;
             $("#text1").show();
             $("#text2").fadeIn("slow");
$("#text3").hide();
$("#text4").hide();
$("#text5").hide();
$("#text6").hide();
$("#text7").hide();
$("#text8").hide();
$("#text9").hide();
$("#text10").hide();
             $("#next").click(function(){
                 $("#next").show();
                 $("#text1").show();
                 $("#text2").show();
$("#text3").fadeIn("slow");
$("#text4").hide();
$("#text5").hide();
$("#text6").hide();
$("#text7").hide();
$("#text8").hide();
$("#text9").hide();
$("#text10").hide();
                 $("#next").click(function(){
                     $("#next").show();
                     $("#text1").show();
                     $("#text2").show();
$("#text3").show();
$("#text4").fadeIn("slow");
$("#text5").hide();
$("#text6").hide();
$("#text7").hide();
$("#text8").hide();
$("#text9").hide();
$("#text10").hide();
$("#next").click(function(){
$("#next").show();
$("#text1").show();
$("#text2").show();
$("#text3").show();
$("#text4").(show);
$("#text5").fadeIn("slow");
$("#text6").hide();
$("#text7").hide();
$("#text8").hide();
$("#text9").hide();
$("#text10").hide();
                         $("#next").click(function(){
                             $("#next").show();
                             $("#text1").show();
                             $("#text2").show();
$("#text3").show();
$("#text4").show();
$("#text5").show();
$("#text6").fadeIn("slow");
$("#text7").hide();
$("#text8").hide();
$("#text9").hide();
$("#text10").hide();
                             $("#next").click(function(){
                                 $("#next").show()
;
                                 $("#text1").show();
                                 $("#text2").show();
$("#text3").show();
$("#text4").show();
$("#text5").show();
$("#text6").show();
$("#text7").fadeIn("slow");
$("#text8").hide();
$("#text9").hide();
$("#text10").hide();
$("#next").click(function(){
$("#next").show();
$("#text1").show();
$("#text2").show();
$("#text3").show();
$("#text4").show();
$("#text5").show();
$("#text6").show();
$("#text7").show();
$("#text8").fadeIn("slow");
$("#text9").hide();
$("#text10").hide();
                                     $("#next").click(function(){
                                         $("#next").hide();
                                         $("#text1").show();
                                         $("#text2").show();
$("#text3").show();
$("#text4").show();
$("#text5").show();
$("#text6").show();
$("#text7").show();
$("#text8").show();
$("#text9").fadeIn("slow");
$("#text10").show();
});
});
});
});
});
});
});
         });
});
</script>
<style>
body {
     margin-top: 40px;
     margin-bottom: 40px;
     margin-right: 10px;
     margin-left: 80px;
}
</style>
</HEAD>
<BODY>
<font face="Raleway" size="5">
<p id="text1">Every web page coded in HTML must always have 4 pairs of tags, always in the same order.</p>
<ul>
<li id="text2"><tt><html></tt> - This tag goes at the beginning. it tells the <a href="#" title="The browser is the program that can open the internet.">browser</a> that the coding is in HTML.
<li id="text3"><tt><head></tt> - This tag tells the browser that the next piece of coding is describing the page.
<li id="text4"><tt><title></tt> - This tag tells the browser what title to put in the <a href="#" title="A tab is the box at the top of your browser that says what the title of the page is. The tab says 'Coding Kids HTML Tutorial' on this page.">tab</a> on your browser.
<li id="text5"><tt></title></tt> - This tag tells the browser to stop the title tag.
<li id="text6"><tt></head></tt> - This tag tells the browser to end the head section.
<li id="text7"><tt><body></tt> - This tag starts the body section of the web page. Coding after this tells the browser how the page will look.
<li id="text8"><tt></body></tt> - This tag tells the browser to end the body section.
<li id="text9"><tt></html></tt> - This tag tells the browser that it is the end of the page.
</ul>
<br>
<a id="text10" href="Lesson7.html">Next</a><br>
<p id="next"><a href="#">Next</a></p>
</font>
</BODY>
</HTML>

Topic Participants
harrind
jakecigar

jQuery is not changing the function of my HTML

jQuery is not changing the function of my HTML

Topic Participants

harrind

jakecigar