title: How to load URL based on unique ID of each button?
body: <p>I am trying to dynamicaly load specific html files into a container DIV with a single onclick function instead of one for each button. </p>
  
  <p>I am pretty new to this (it's my first time working with AJAX or JQuery) and this is what I managed to come up with so far.</p>
  
  <pre><code>$(document).ready(function(){
  
  $("#container").load("home.html");
  
  $("#home").click(function(){
      $("#container").load("home.html");
  });
  $("#news").click(function(){
      $("#container").load("news.html");
  });
  $("#about").click(function(){
      $("#container").load("about.html");
  });
  $("#contact").click(function(){
      $("#container").load("contact.html");
  });
  });
  </code></pre>
  
  <p>As you see, for now I have 4 buttons with unique IDs and a function for each of them. But what I'd like to do is to simplify this and create a single function that takes each button's ID and uses it as the URL for the page to load in the container. So that URL = ID + ".html".</p>
  
  <p>This would help me avoid having to add script with every new entry on my portfolio.</p>
  
  <p>Anyone has any ideas on how I can do this?</p>
  
  <p>Thanks!</p>