switching tabs using javascript onclick

Question

I have the following HTML:

<div class="bubble">
        <div class="content recommend" style="display: block; ">
        <h1>Recommend to your friends</h1>

        <div id="bubble_tabs">    
            <ul style="font-size:11px;">
                <li id="tab1"><a class="" href="#" onclick="switch_bubble_tab(this,'#friends_inveni');return false;">Favor</a></li>
                <li id="tab2"><a href="#" onclick="switch_bubble_tab(this,'#friends_facebook');return false;" class="active">Facebook</a></li>
            </ul>
        </div>

        <div id="friends_favor" class="friends_rec" style="display: none; ">
                <br>
                You currently have no friends. <a style="text-decoration:underline;" href="/Friends/Invite/">Invite friends</a> or send them a recommendation via Facebook or Email.
        </div>

        <div id="friends_facebook" class="friends_rec" style="display: block; ">
            <iframe src="" style="overflow:hidden;width:350px;height:400px;"></iframe>
        </div>

        </div>

</div>

I want to implement the switch_bubble_tab, so that when the tab is clicked it shows the div id passed to that function. How do I do this?

Thomas Shields · Accepted Answer · 2011-04-28 16:42:21Z

1

function switch_bubble_tab(obj) {
$(".friends_rec").hide(); 
$(".friends_rec").eq($(obj).parents("li").index()).show();
//HTML below: 
<li id="tab1"><a class="" href="#" onclick="switch_bubble_tab(this);">Favor</a></li>

edited Apr 28, 2011 at 16:42

answered Apr 28, 2011 at 15:25

Thomas Shields

8,9235 gold badges45 silver badges79 bronze badges

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

9 Comments

adit Over a year ago

it fades in and out, but the content is not reloaded

Thomas Shields Over a year ago

I beg your pardon. i goofed. i had it grabbing the index of the a that was clicked instead of it's parent li ...updating.

Thomas Shields Over a year ago

Yes. i just updated the answer to include .parents("li") which grabs the parent li and takes it's index

adit Over a year ago

okay now it works, but if you test it out.. when it fades in and fades out. why is the hight suddenly huge?

Thomas Shields Over a year ago

Just saw it. Forgot about that - it's because the animations occur at the same time and thus the the first one is still there (fading out) as the second one fades in. There. Modified to quickly fade out the current and then fade in the new one. hope that helps!

|

Collectives™ on Stack Overflow

switching tabs using javascript onclick

1 Answer 1

9 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

9 Comments

Your Answer

Sign up or log in

Post as a guest

Related