title: Creating Dynamic Javascript AJAX
body: <p>Alright, I'm currently working to create on an account mainpage a applet to show each "kid" the user has registered to the site. My idea is simple :</p>
  
  <p>Kid 1 / Kid 2 / Kid 3</p>
  
  <p>As buttons (with style and such) when he goes on this page. When he clicks on one of those buttons/names, I use javascript to show the description of the infos of the kid, etc. When I click on another name, the current content closes and shows the new appropriate content.</p>
  
  <p>The content is dynamically created, so the id's of the divs containing the info are named after the number of kids. Example : content_Info_Kid1, content_Info_Kid2, ... It doesnt matter how many kids there are, they will be named content_Info_Kid32 if need be.</p>
  
  <p>Now, I'm not too comfy with AJAX and javascript in general. In fact, I am not at all.</p>
  
  <p>My first idea was to do this in a separate javascript file.</p>
  
  <pre><code>$(document).ready(function() {
  $("#content_info_kid1").hide();
  $("#content_info_kid2").hide();
  $("#content_info_kid3").hide();
  
  $("#KID_1").click(function () {
      if ($("#content_info_kid1").is(":hidden")){
          $("#content_info_kid2").hide();
          $("#content_info_kid3").hide();
          $("#content_info_kid1").show("slow");
          $(this).css("font-weight","bold");
          $("#KID_2").css("font-weight","normal");
          $("#KID_3").css("font-weight","normal");
      }
  });
  $("#KID_2").click(function () {
      if ($("#content_info_kid2").is(":hidden")){
          $("#content_info_kid1").hide();
          $("#content_info_kid3").hide();
          $("#content_info_kid2").show("slow");
          $(this).css("font-weight","bold");
          $("#KID_1").css("font-weight","normal");
          $("#KID_3").css("font-weight","normal");
      }
  });
  $("#KID_3").click(function () {
      if ($("#content_info_kid3").is(":hidden")){
          $("#content_info_kid2").hide();
          $("#content_info_kid1").hide();
          $("#content_info_kid3").show("slow");
          $(this).css("font-weight","bold");
          $("#KID_1").css("font-weight","normal");
          $("#KID_2").css("font-weight","normal");
      }
  });
  });
  </code></pre>
  
  <p>Obviously, this is not dynamic. And I don't want to create 32 alternatives, of course. Can somebody point me the right direction to create a dynamic way to show my content based on the number of kids ?</p>