title: AJAX load method and toggle
body: <p>First of all I'm sorry for my noobness! :-( I am currently trying out AJAX jQuery load() method to load html page content for my navigation links. To do so, I created an empty div tag with an id, and I am replacing it accordingly:</p>
  
  <p>HTML main webpage: </p>
  
  <pre><code> &lt;!--nav links--&gt;:
  &lt;a href="#" id="index"&gt;Home&lt;/a&gt;
  &lt;a href="#" id="news"&gt;News&lt;/a&gt;
  &lt;a href="#" id="events"&gt;&lt;/a&gt;
  
  &lt;!-- Main Container to be replaced--&gt;
  &lt;div id="#pageContent"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>JQuery:</p>
  
  <pre><code> $("#index").click(function() {
      $("#pageContent").load("home.html", function (response, status, xhr) {  // (selector).load(url, data, function(response, status, xhr))
          if (status == "error") {                                            // function is an optional callback method that runs when request is completed.
              var msg = "Sorry but there was an error: ";                     // response = contains result data from request
              $("#error").html(msg + xhr.status + " " + xhr.statusText);      // status = contains status of request (error, success, etc)
          }                                                                   //  xhr = contains XMLHttpp Request object
      });    
  });
  </code></pre>
  
  <p>However, #index content has also a toggle button that if pressed, it will redirect to a specific section of another div - #news that is also called by ajax. It's purpose it to go to a specific news article (e.g. I have a list of 10 articles, when someone presses "read more" button on #index section, it will load article 5 in #news section). I created JS function to do so and it works when I load pages statically:</p>
  
  <pre><code>function showNews(newsToGo) {
              window.location.assign(newsToGo);
          }
  
  
          //-News Box 1-//
          document.getElementById('news-redirect1').addEventListener("click", function(){
                  showNews("news.html#news-post-1");
          });
  </code></pre>
  
  <p>Now, I have no idea how to make it work in AJAX. If I leave the JS in, it just loads a "bare" div. Can anyone point me into right direction? </p>