Question

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

That code is

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

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.

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.

This is what I had…

     $("#close_btn").click(function ()
 {
     $("#theIntroductionContent").show();
     $("#askMeAQuestion").hide();
 });

The HTML Markup that it runs against is as follows :

<div class="row <?php echo $personsImage ?>">
        <div class="span10">

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

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

        </div>

         <div class="span6">

          <?php

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

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

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

?>


        </div>
    </div>

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

Answer 1

You could try something like this:

$("#close_btn").click(function() {

   $("#theIntroduction").trigger("click");

});

I.e., on click of the close button trigger a click on the introduction link which should then execute your first function (which if I’m reading it correctly will do the hide and show for you)…