title: Click to show detail using Jquery and ajax
body: <p>I have one question about popup slide. I want to do as in the picture:</p>
  
  <p><img src="https://i.stack.imgur.com/D0z8s.gif" alt="enter image description here"></p>
  
  <p>So i am using this for click to show post detail:</p>
  
  <pre><code>function getAreaInfo(id)
  {
    var infoBox = document.getElementById("infoBox");
    if (infoBox == null) return true;
    var xhr = new XMLHttpRequest();
    xhr.onreadystatechange = function() {
      if (xhr.readyState != 4) return;
      if (xhr.status != 200) alert(xhr.status);
      infoBox.innerHTML = xhr.responseText;
    };
    xhr.open("GET", "get_post_info.php?msg_id=" + id, true);
    xhr.send(null);
    return false;
  }
  </code></pre>
  
  <p>This is link:</p>
  
  <pre><code>&lt;a href="get_post_info.php?msg_id=351" class="" onclick="return getAreaInfo(351);" data-id="7"&gt; Click To Show Post Details &lt;/a&gt;
  </code></pre>
  
  <p>Showing the details div:</p>
  
  <pre><code>&lt;div id="infoBox"&gt;&lt;/div&gt;
  </code></pre>