Hello everyone! I need help. How do I stop a typing text, how to hide/show a class/id, and load a content everytime a button is press. The problem in my code is it doesn't hide the website, everytime I click the button it always reload the content. Then when I try to click on the other button its still loading the content that has been loaded before.

Information.html

<html>
<head>
<title>Alexander</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<LINK REL=StyleSheet HREF="style.css" TYPE="text/css" MEDIA=screen>
    <script src="jquery.js"></script> 
                <script>
                function loadContent()
                {
                   $("#includedQandAContent").load("QandA_body.html");
                   $("#includedCreditsContent").load("Credits_body.html");
                }
     $(document).ready(function()
     {
        $('#includedInformationContent,#includedQandAContent,#includedCreditsContent').hide();

            $('a#homeAnchor').click(function()
                                                  {
                                                      var number=1;
                                                      if(number==1){
                                                      $("#includedHomeContent").load("home_body.html");
                                                      number++;
                                                      }
                                                  })
            $('a#informationAnchor').click(function()
                                                  {
                                                  $('#includedInformationContent').show();
                                                  $('#includedHomeContent,#includedQandAContent,#includedCreditsContent').hide();
                                                  $("#includedInformationContent").load("information_body.html");
                                                  $('#example3').hide();

                                                  })
            $('a#QandAAnchor').click(function()
                                                  {
                                                  })
            $('a#creditsAnchor').click(function()
                                                  {

                                                  })

     });


</script>
<script type="text/javascript" src="TypingText.js">
/****************************************************
* Typing Text script- By Twey @ Dynamic Drive Forums
* Visit Dynamic Drive for this script and more: http://www.dynamicdrive.com
* This notice MUST stay intact for legal use
****************************************************/
</script>
</head>
<body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<!-- Save for Web Slices (Alexander.psd) -->
<div class="main">
<table id="Table_01" width="1025" height="769" border="0" cellpadding="0" cellspacing="0" align="center">
    <tr>
        <td colspan="13">
            <img src="images/Alexander_01.png" width="1024" height="149" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="7">
            <img src="images/Alexander_02.png" width="252" height="528" alt=""></td>
        <td colspan="2" rowspan="3">
            <a href="#" id="homeAnchor"><div id="home"></div></a></td>
        <td colspan="9">
            <img src="images/Alexander_04.png" width="660" height="3" alt=""></td>
    </tr>
    <tr>
        <td rowspan="4">
            <img src="images/Alexander_05.png" width="29" height="106" alt=""></td>
        <td rowspan="3">
            <a href="#" id="informationAnchor"><div id="information"></div></a></td>
        <td rowspan="4">
            <img src="images/Alexander_07.png" width="28" height="106" alt=""></td>
        <td rowspan="3">
            <div id="QandA"></div></td>
        <td colspan="5">
            <img src="images/Alexander_09.png" width="379" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="1" alt=""></td>
    </tr>
    <tr>
        <td rowspan="3">
            <img src="images/Alexander_10.png" width="29" height="105" alt=""></td>
        <td colspan="2">
            <div id="Credits"></div></td>
        <td colspan="2" rowspan="5">
            <img src="images/Alexander_12.png" width="238" height="524" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="56" alt=""></td>
    </tr>
    <tr>
        <td colspan="2" rowspan="2">
            <img src="images/Alexander_13.png" width="112" height="49" alt=""></td>
        <td colspan="2" rowspan="2">
            <img src="images/Alexander_14.png" width="112" height="49" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="4" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/Alexander_15.png" width="112" height="45" alt=""></td>
        <td>
            <img src="images/Alexander_16.png" width="112" height="45" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="45" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/Alexander_17.png" width="45" height="419" alt="">
        </td>
        <td colspan="7">
            <div class="insidebody">
                 <div id="includedHomeContent"></div>
                <div id="includedInformationContent"></div> 
            </div>

        </td>
        <td rowspan="2">
            <img src="images/Alexander_19.png" width="63" height="419" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="393" alt=""></td>
    </tr>
    <tr>
        <td colspan="7">
            <img src="images/Alexander_20.png" width="426" height="26" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="26" alt=""></td>
    </tr>
    <tr>
        <td rowspan="2">
            <img src="images/Alexander_21.png" width="225" height="91" alt=""></td>
        <td colspan="11">
            <img src="images/Alexander_22.png" width="574" height="71" alt=""></td>
        <td rowspan="2">
            <img src="images/Alexander_23.png" width="225" height="91" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="71" alt=""></td>
    </tr>
    <tr>
        <td colspan="11">
            <img src="images/Alexander_24.png" width="574" height="20" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="1" height="20" alt=""></td>
    </tr>
    <tr>
        <td>
            <img src="images/spacer.gif" width="225" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="27" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="45" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="67" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="29" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="112" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="28" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="112" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="29" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="49" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="63" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="13" height="1" alt=""></td>
        <td>
            <img src="images/spacer.gif" width="225" height="1" alt=""></td>
        <td></td>
    </tr>
</table>
</div>
<!-- End Save for Web Slices -->
</body>
</html>

Information_Body.html

<script>
$('#example3').hide;
</script>
<script>
            $('a#NextAnchor').click(function()
                                                  {
                                                    $('#example2').hide;
                                                    $('#example3').show;
                                                  })
</script>
    <br />
    <div id="example1"  align="center">
        Welcome to my Information Page! Here you can check all of my likes and dislike.
    </div>
    <p id="example2" align="justify">
    Hi and welcome! This is the Information Page. you can get some intel on my life. personal achievements and more.

    My complete name is Alexander Paul Asuncion Areola. I got my name Alexander Paul from Alexander III of Macedon. a.k.a Alexander the great. My hobbies are simply: Playing computer (DotA and Ragnarok. respectively), and Watching TV. Reading entertainment books and sleeping. (great. sleeping)
<br />
<a href="#" id="NextAnchor">next</a>
    </p>
        <div id="example3" align="justify">
        RAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKATA
        KATAKATAKATAKATAKATAKATAKATAKATAKATAKATAKA
        <br />
<a href="#" id="NextAnchor1">next</a>
    </div>

            <script type="text/javascript">
            //Define second typing example (use "slashing" cursor at the end):
            new TypingText(document.getElementById("example2"), 10, function(i){
            var ar = new Array("\\", "|", "/", "-"); return " " + ar[i.length % ar.length]; })
            //Type out examples:
            TypingText.runAll();
                jQuery(".next").live("click", function(){
                jQuery(".main")
                .trigger({type: "play"})
                .trigger({type: "stop"});
                return false;
                });

            </script>

`

For cancel the default event in our a functions use "return false;" in end your the functions.

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.