jQuery .click function
<p>I currently have a jQuery code for 4 buttons. Basically you click the button, it loads the content ID for that area.</p>

<p>That code is </p>

<pre><code>$("#theIntroduction, #theGoogleFeed, #theTwitterFeed, #theQuote, #contactUs").click(function ()
 {
    var container = $(this).attr('id')
    $(theCurrentPageHeader).hide();
    $('#'+container+'Content').show();
    theCurrentPageHeader = $('#'+container+'Content')
     return false;
 });
</code></pre>

<p>I've added a button of the id "close_btn". What I'd like to do is click that button and it closes the content area.</p>

<p>I've been playing around with .hide and .show but the problem is once this is clicked, It either hides the content completely or displays the next in a block below the other.</p>

<p>This is what I had...</p>

<pre><code>     $("#close_btn").click(function ()
 {
     $("#theIntroductionContent").show();
     $("#askMeAQuestion").hide();
 });
</code></pre>

<p>The HTML Markup that it runs against is as follows :</p>

<pre><code>&lt;div class="row &lt;?php echo $personsImage ?&gt;"&gt;
        &lt;div class="span10"&gt;

          &lt;h1 class="large primary" style="line-height:12px; margin-top:15px; margin-bottom:17px; margin-left:10px;"&gt;&lt;?php 
            $pageTitle = get_the_title(); 
            if ($pageTitle == 'Personal')
            {
                echo 'Personal legal services';
            }else{
                echo $pageTitle;
            };

            ?&gt;&lt;/h1&gt;
            &lt;hr class="light" style="height:1px; margin-left:10px;" /&gt;
            &lt;hr class="space" /&gt;
            &lt;div id="theIntroductionContent" class="personInformationClass " style="display:none;"&gt;&lt;div class="social introduction" style="float:left; padding:10px;"&gt;&lt;/div&gt;&lt;p class="" style="line-height:24px; margin:0 60px;"&gt;&lt;?php echo get_the_excerpt(); ?&gt;&lt;/p&gt;&lt;/div&gt;
            &lt;div id="theGoogleFeedContent" class="personInformationClass" style="display:none;"&gt;&lt;div class="social google" style="float:left; padding:10px;"&gt;&lt;/div&gt;&lt;p class="medium" style="line-height:24px;"&gt;&lt;?php echo $googleNews ?&gt;&lt;/p&gt;&lt;/div&gt;
            &lt;div id="theTwitterFeedContent" class="personInformationClass" style="display:none;"&gt;&lt;div class="social twitter_sub" style="float:left; padding:10px;"&gt;&lt;/div&gt;&lt;p class="medium" style="line-height:24px;"&gt;&lt;?php echo $twitterName ?&gt;&lt;/p&gt;&lt;/div&gt;
             &lt;div id="theQuoteContent" class="personInformationClass" style="display:none;"&gt;&lt;div class="social quote" style="float:left; padding:10px;"&gt;&lt;/div&gt;&lt;p class="medium" style="line-height:24px;"&gt;&lt;?php echo $peopleDetails[3] ?&gt;&lt;/p&gt;&lt;/div&gt;
             &lt;div id="contactUsContent" class="personInformationClass" style="display:none;"&gt;
                &lt;?php get_template_part('askMeAQuestion','index') ?&gt;
             &lt;/div&gt;

        &lt;/div&gt;

         &lt;div class="span6"&gt;

          &lt;?php

            echo '&lt;h1 class="large primary" style="line-height:12px; margin-top:15px; margin-bottom:17px;"&gt;&lt;a href="'.$tempLink.'/people/'.$personsPermalink.'/" class="primary"&gt;' . $peopleDetails[0] . '&lt;/a&gt;&lt;/h1&gt;';
            echo '&lt;hr class="light" style="width:82%; height:1px; float:left; " /&gt;';
            echo '&lt;p class="PersonTextClass"&gt;&lt;!--strong&gt;'.$peopleDetails[1].'&lt;/strong--&gt;&lt;/p&gt;';
            echo'&lt;p class="PersonTextClass small"&gt;Click the icons below to see whats going on and what we are talking about.&lt;/p&gt;&lt;hr class="space" /&gt;';
            echo '&lt;ul class="person_social_links"&gt;';
            echo '&lt;li&gt;&lt;a title=""class="social introduction" id="theIntroduction"&gt;Tilly Bailey &amp; Irvine page introduction&lt;/a&gt;&lt;/li&gt;';
            echo '&lt;li&gt;&lt;a title="Google News: '.$googleAlertsKeyword.'"class="social google" id="theGoogleFeed"&gt;Google alert&lt;/a&gt;&lt;/li&gt;';

            if (trim($peopleDetails[4]) === "null")
            {

            }else{
           echo '&lt;li&gt;&lt;a title="Follow me on Twitter" class="social twitter_sub" id="theTwitterFeed"&gt;follow me on twitter&lt;/a&gt;&lt;/li&gt;';
            }
            echo '&lt;li&gt;&lt;a title="Hi im '.$peopleDetails[0] .'" class="social quote" id="theQuote"&gt;my quote&lt;/a&gt;&lt;/li&gt;';
            echo '&lt;/ul&gt;';
            echo '&lt;hr class="space" /&gt;&lt;hr class="space" /&gt;&lt;hr class="space" /&gt;';
            echo '&lt;a class="medium footer_linkBox block askBtn" id="contactUs" style="color:#fff;"&gt;Ask '.$peopleDetails[0].'&lt;/a&gt;';

?&gt;


        &lt;/div&gt;
    &lt;/div&gt;
</code></pre>

<p>Is there any way I can incorporate the #close_btn to literally close the box that it resides and go to the previous box. Or the default page load which is #theIntroduction</p>
