Generating tabs with jquery and css

Question

I am trying to make something like the bar at the bottom of GMail or Facebook's chat window. I am NOT trying to make a chat service or anything in that like.

In facebook's chat, when you click a friend, a rectangular block thingy forms at the bottom of the visible page and has your friends name on it as well as the chat history.

I was wondering hwo you can make it so that if u have a list, you can click each of those and generate tabs with the respective information of what you clicked at the bottom of your page?

Would I have to generate the tabs 1st for each one and then set display:none and then when I want to generate a tab, use [please forgive the poor syntax below]

$(##tab attribute##).click(function {
        ##selected tab##.show()
     }
 )

Darragh Enright · Accepted Answer · 2011-07-10 10:23:42Z

2

If I understand you correctly... You don't have to create the tabs as you can create them on the fly. Have a look at this jsfiddle for a trivial implementation.

EDIT

Updating with detail, as per AlienWebguy's suggestion:

First, create your ordered list of links and a container for your tabs. Each link has a unique id:

html:

<!-- links to contacts or whatever -->
<ul id="chat-links">
    <li><a id="foo" href="#">foo</a></li>
    <li><a id="bar" href="#">bar</a></li>
    <li><a id="baz" href="#">baz</a></li>
</ul>

<!-- container for your tabs -->
<div id="chat-stage"></div>

Then, create a click event for each link. Each click event will create a personalised message inside a 'chat-window' div:

jQuery:

// click event
$('#chat-links a').click(function() {
    // personalised message
    var str = "Hi, " + this.id + ", what's up?";
    // append a new div to your tab container
    $('#chat-stage').append('<div class="chat-window">' + str + '</div>');
});

Then style the elements:

css:

#chat-stage
{
    position: absolute;
    bottom: 0px;  
}

.chat-window
{
    border: 1px solid #ccc;
    height: 100px;
    float: left;
    margin-right: 8px;
    padding: 8px;
    width: 100px;  
}

As I mentioned this is a pretty trivial implemetation. For instance, this will allow you to click on the same link several times and open a new tab for each click event. You could amend the click event to deal with this; e.g: generate an id for each div and do a conditional. You might also want to minimise, or remove other tabs when opening a new tab. Again, your implementation depends on what you want to do; in the latter case you could add $('#chat-stage').empty(); to the first line of your click event.

Hope this helps :)

edited Jul 10, 2011 at 10:23

answered Jul 10, 2011 at 2:21

Darragh Enright

14.2k8 gold badges45 silver badges49 bronze badges

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

2 Comments

SeanCannon Over a year ago

Please always post the result code as well as the fiddle link. If the link ever stops working, your answer will be useless to others.

Darragh Enright Over a year ago

@AlienWebguy Yes.. good point! not sure why I didn't do that in the first place; guess it was pretty late. answer updated. cheers.

Collectives™ on Stack Overflow

Generating tabs with jquery and css

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related