title: How do I program an HTML page to update text imported from a text file on button click?
body: <p>I'm been having a lot of trouble figuring out a way to update the text in a section without having to reload the page. What I would like the code to do is update the text and a picture in a section (id="section2" below) when you click on one of the tabs. </p>
  
  <p>What I want the page to do when you click on one of the tabs is to load text (and in the future a .jpg too) from a local .txt file. As of right now, the changeText function updates the text but only when you manually type in the text. </p>
  
  <p>From my code below this works:</p>
  
  <p>$('#section-text').html("test of text1");</p>
  
  <p>but what I would like to do would be to load text in from a .txt file called "text1.txt"</p>
  
  <p>$('#section-text').html("text1.txt");</p>
  
  <p>I'm just starting to venture into the web programming so I have very little experience with JavaScript and JQuery so most of the stuff that I've shown below is trial and error from other sites. I've tried many other methods that I've found online but with very little success. So far this is the closest I've got to my ideal solution, but I find if I just copy and paste my text it loses formatting.</p>
  
  <p>Any help would be greatly appreciated. And if people have any suggestions on cleaning up some of the code it would also be very welcome.</p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt; 
    &lt;meta name="description" content="Test Page"&gt;
  
    &lt;title&gt;Test Page&lt;/title&gt;
  
    &lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  
    &lt;script type="text/javascript"&gt;
      function changeText(text){
        if (text == 'Example 1'){
          $('#section-text').html("test of text1");
          $('#section-pic').html("images/slide1.jpg");
        }
        if (text == 'Example 2'){
          $('#section-text').html("Change the text");
          $('#section-pic').html("images/slide2.jpg");
        }
        if (text == 'Example 3'){
          $('#section-text').html("Something new here");
          $('#section-pic').html("images/slide3.jpg");
        }
      }
    &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;div class="nav"&gt;
    &lt;link rel="stylesheet" href="css/styles.css"&gt;
    &lt;ul&gt;
      &lt;li id="Example 1" onClick="changeText('Example 1');"&gt;&lt;a&gt;Example 1&lt;/a&gt;&lt;/li&gt;
      &lt;li id="Example 2" onClick="changeText('Example 2');"&gt;&lt;a&gt;Example 2&lt;/a&gt;&lt;/li&gt;
      &lt;li id="Example 3" onClick="changeText('Example 3');"&gt;&lt;a&gt;Example 3&lt;/a&gt;&lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="section2" class="section2" align="center"&gt;
    &lt;div id="section-text" class="section-text"&gt;
      &lt;iframe src="des/text1.txt" style="overflow:hidden" width ="90%"; height="90%" seamless="seamless" scrolling="no" frameBorder="0"&gt;&lt;/iframe&gt; 
    &lt;/div&gt;
    &lt;div id="section-pic" class="section-pic"&gt;
      &lt;span class="Centerer"&gt;&lt;/span&gt;
      &lt;img class="Centered" src="images/slide1.jpg" style="height:75%; width:90%"/&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>The CSS:</p>
  
  <pre><code>&lt;style&gt;
  #header {
      background-color:#083266;
      color:white;
      text-align:center;
  }
  ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
  }
  li {
      display: inline-block;
  }
  
  #section2 {
      width:100%;
      background-color:grey;
      padding-top:25px; 
      padding-bottom:25px; 
      height: 10cm; 
  }
  .section-text {
      width:60%;
      float:right;
      background-color:grey;
      padding-top:25px; 
      padding-bottom:25px; 
      text-align:center; 
  } 
  .section-pic {
      background-color:grey;
      width: 40%;
      float:left;
      text-align:center;            
  }
  .Centerer {
      display: inline-block;
      height: 100%;
      vertical-align: middle;
  }
  .Centered {
      display: inline-block;
      vertical-align: middle;
  }
  
  .nav ul {
    list-style: none;
    background-color: #444;
    text-align: center;
    padding: 10px;
    margin: 0;
  }
  .nav li {
    font-family: 'Oswald', sans-serif;
    font-size: 1.2em;
    line-height: 40px;
    height: 40px;
    width = 100px
  }
  
  .nav a {
    text-decoration: none;
    color: #fff;
    display: block;
    transition: .3s background-color;
  }
  
  .nav a:hover {
    background-color: #005f5f;
  }
  
  .nav a.active {
    background-color: #fff;
    color: #444;
    cursor: default;
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>AJAX attempt: </p>
  
  <pre><code>var reader = new XMLHttpRequest() || new ActiveXObject('MSXML2.XMLHTTP');
  
  function loadFile() {
    reader.open('GET', 'text1.txt', true); 
    reader.onreadystatechange = displayContents;
    reader.send(null);
  }
  
  function displayContents() {
    if(reader.readyState==4) {
      var el = document.getElementById('page_content');
      el.innerHTML = reader.responseText;
    }
  } 
  </code></pre>
  
  <p>UPDATED - My Solution:</p>
  
  <p>For those of you who run into the same problem as I did here is the solution I used. After a lot of searching and asking around I used the display option in my css file. So add the following to your css file:</p>
  
  <pre><code>.hidden { display: none; }
  .unhidden { display: block; }
  </code></pre>
  
  <p>In my case I wanted to update some text and a picture with a click on each tab so I added the following script to my html:</p>
  
  <pre><code>&lt;script src="https://code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
    function unhide(divID,divID2) {
      $(".unhidden").each(function() {
        $(this).removeClass("unhidden").addClass("hidden");
      });
      //change text 
      var item = document.getElementById(divID);
      if (item) {
        item.className=(item.className=='hidden')?'unhidden':'hidden';
      }
      //change the images 
      var item = document.getElementById(divID2);
      if (item) {
        item.className=(item.className=='hidden')?'unhidden':'hidden';
      }
    }
  &lt;/script&gt;
  </code></pre>
  
  <p>and here is the html script that I used:</p>
  
  <pre><code>&lt;div class="section2" align="center"&gt;
    &lt;div class="nav"&gt;
      &lt;link rel="stylesheet" href="css/styles.css"&gt;
      &lt;ul&gt;
        &lt;li&gt; &lt;a href="javascript:unhide('Text1','Pic1');"&gt; Example 1 &lt;/a&gt;&lt;/li&gt;
        &lt;li&gt; &lt;a href="javascript:unhide('Text2','Pic2');"&gt; Example 2 &lt;/a&gt;&lt;/li&gt;  
      &lt;/ul&gt;  
    &lt;/div&gt;  
  
    &lt;div class="section-text"&gt;
      &lt;div id="Text1" class="unhidden"&gt;
        &lt;p&gt; Text for Example 1 &lt;/p&gt;
      &lt;/div&gt;
  
      &lt;div id="Text2" class="hidden"&gt;
        &lt;p&gt; Add your text here for Text 2 &lt;/p&gt;
      &lt;/div&gt; 
    &lt;/div&gt;
  
    &lt;div class="section-pic"&gt;
      &lt;div id="Pic1" class="unhidden"&gt;
        &lt;span class="Centerer"&gt;&lt;/span&gt;
        &lt;img class="Centered" src="images/pic1.jpg" style="height:auto; width:auto"/&gt;
      &lt;/div&gt;
  
      &lt;div id="Pic2" class="hidden"&gt;
        &lt;span class="Centerer"&gt;&lt;/span&gt;
        &lt;img class="Centered" src="images/pic2.jpg" style="height:auto; width:auto"/&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>