jQuery .click function

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

If you could include the HTML that the Javascript runs against, that would be really useful. — Anthony Grist
– Anthony Grist, Commented Feb 8, 2012 at 11:08
Also note that IDs on elements have to be unique, so if you have a #close_btn element in each of your five content areas, you're producing invalid HTML. — Anthony Grist
– Anthony Grist, Commented Feb 8, 2012 at 11:09
@AnthonyGrist this is true. Swapping to the default element from the askMeAQuestion content when the close_btn is clicked would be better. This is the main issue I've had — StuBlackett
– StuBlackett, Commented Feb 8, 2012 at 11:14

nnnnnn · Accepted Answer · 2012-02-08 11:11:05Z

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)...

answered Feb 8, 2012 at 11:11

nnnnnn

150k30 gold badges210 silver badges247 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

StuBlackett Over a year ago

That's exactly what I need. Maybe I was looking into something a bit more with the replacing of function's on and off. Perfect, Thanks

Tx3 · Accepted Answer · 2012-02-08 11:15:38Z

1

I think the question was little bit hard to understand. Maybe you could use jsFiddle to demonstrate your problem.

What I was thinking when I saw your source code was that what happens if you add new navigation item. Maybe you could do something more generic.

<ul>
    <li class="navigationItem">Introduction</li>
    <li class="navigationItem">Google feed</li>
    etc.
</ul>

$('.navigationItem').click(function () {})

or

<ul id="navigation">
    <li>Introduction</li>
    <li>Google feed</li>
    etc.
</ul>

$('#navigation > li').click(function () {})

answered Feb 8, 2012 at 11:15

Tx3

6,9284 gold badges39 silver badges52 bronze badges

1 Comment

StuBlackett Over a year ago

I think a jsFiddle would have been a good idea. Think I was assuming that a quick jQuery fix might have been the order. But the level of content and ID's I have jsFiddle would have been better.

Collectives™ on Stack Overflow

jQuery .click function

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related