Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>BAM! Here's a complete working example for you (though I'm hitting the Twitter API Status page). The comments should answer all of your questions. All you need to do is change the link in the anchor tag to the link you want.</p> <pre><code>&lt;!doctype html&gt; &lt;html&gt; &lt;head&gt; &lt;title&gt;My Rockin' Answer&lt;/title&gt; &lt;style type="text/css"&gt; #contents{ margin-top:20px; border:1px solid #FF0000; display:none; } &lt;/style&gt; &lt;/head&gt; &lt;body&gt; &lt;a href="https://api.twitter.com/1/help/test.json" title="Show / Hide" class="show" id='link'&gt;Show Twitter API Status&lt;/a&gt; &lt;!-- Here is the DIV that we're putting the ajax content into --&gt; &lt;!-- Notice that it's hidden above in the CSS --&gt; &lt;div id="contents"&gt;&lt;/div&gt; &lt;!-- Include jQuery from the jQuery CDN --&gt; &lt;!-- Always put your Javascript at the end of the file because it --&gt; &lt;!-- may prevent some of the other content from loading while it's --&gt; &lt;!-- fetching the javascript from the CDN --&gt; &lt;script src='http://code.jquery.com/jquery-latest.min.js'&gt;&lt;/script&gt; &lt;script type='text/javascript'&gt; // This waits until the document is completely done loading $(document).ready(function(){ // The code inside this function gets // called when the user clicks the link $('#link').click(function(e){ // This prevents the link from going to it's href // If we don't have this, none of the following // javascript will be executed e.preventDefault(); // Check to see if we're displaying the ajax content... if($(this).hasClass('show')){ // Since we're not showing the ajax content, grab it $.ajax({ url : $(this).attr('href'), // Use the value we have in the href attribute success : function(response){ // Execute the code in here when we successfully get the content back $('#link').removeClass('show').addClass('hide'); // Indicate that we are showing the ajax content $('#link').html('Hide Twitter API Status'); // Change the link's text $('#contents').html(response); // Append the ajax content into our hidden div $('#contents').show(); // Show the hidden div } }); } else { // We are already showing the ajax content so... // Indicate that we are no longer showing the ajax content $(this).removeClass('hide').addClass('show'); // Change the link text $(this).html('Show Twitter API Status'); // Hide the ajax content $('#contents').hide(); } }); }); &lt;/script&gt; &lt;/body&gt; &lt;/html&gt; </code></pre>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload