Creating tabbed interfaces using jQuery and CSS

Question

Creating tabbed interfaces using jQuery and CSS

I'm currently working on creating a feature similar to the bottom bar in GMail or Facebook's chat window. Just to clarify, I am not attempting to develop a chat service or anything of that nature.

In Facebook's chat function, when you click on a friend, a rectangular block appears at the bottom of the visible page with your friend's name and chat history.

I was curious about how to generate tabs at the bottom of the page based on a list of items, such that clicking on each item would display its corresponding information in a tab?

Would it be necessary to pre-generate tabs for each item and then set them to display:none, only showing them when clicked, as shown in the pseudo-code below?

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

jquery css

Answer 1

Answer №1

If I understand correctly... There's no need to pre-create tabs as you can generate them dynamically. Check out this demo for a simple example.

UPDATE

To provide more details, following AlienWebguy's advice:

Start by making a list of links and a container for the tabs. Each link should have a unique id:

html:

<!-- Links to different sections -->
<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 the tabs -->
<div id="chat-stage"></div>

Next, create a click event for each link. When clicked, it will display a custom message in a 'chat-window' div:

jQuery:

// Click event
$('#chat-links a').click(function() {
    // Custom message
    var str = "Hi, " + this.id + ", what's up?";
    // Append a new div to the 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;  
}

This is a basic implementation that allows multiple tabs to be opened by clicking on the same link. You can adjust the click event to handle this situation, such as generating a unique id for each tab or implementing a conditional statement. Additionally, you may want to close other tabs when opening a new one. In this case, you can add $('#chat-stage').empty(); at the beginning of your click event.

Hope this explanation helps :)

Answer 2

If I understand correctly... There's no need to pre-create tabs as you can generate them dynamically. Check out this demo for a simple example.

UPDATE

To provide more details, following AlienWebguy's advice:

Start by making a list of links and a container for the tabs. Each link should have a unique id:

html:

<!-- Links to different sections -->
<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 the tabs -->
<div id="chat-stage"></div>

Next, create a click event for each link. When clicked, it will display a custom message in a 'chat-window' div:

jQuery:

// Click event
$('#chat-links a').click(function() {
    // Custom message
    var str = "Hi, " + this.id + ", what's up?";
    // Append a new div to the 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;  
}

This is a basic implementation that allows multiple tabs to be opened by clicking on the same link. You can adjust the click event to handle this situation, such as generating a unique id for each tab or implementing a conditional statement. Additionally, you may want to close other tabs when opening a new one. In this case, you can add $('#chat-stage').empty(); at the beginning of your click event.

Hope this explanation helps :)

Creating tabbed interfaces using jQuery and CSS

Answer №1

Similar questions

Is there a way to replicate an ajax GET request with data parameters in Postman?

Incorrect form element style is only visible when contained within an unstyled HTML Details tag

What are alternative methods to prevent a div from expanding in width from the right side other than using position absolute?

Automatically retrieve elements via AJAX once the call is made

Polymer elements fail to adapt to varying screen sizes

Align text vertically within a link box by overriding inherited CSS styles

Height Issue with Nested Columns in Bootstrap 5

Several problems with CSS regarding DIV height set to 100% and the content inside

jQuery Selectors with Variable

What could be causing my navbar to not be responsive on mobile devices?

The functionality of the angularjs class seems to be malfunctioning

What happens to the page layout when a user adjusts the window size?

Customizable initiation time for the JQuery Countdown timer

Getting the Value of my Latest Selection in Bootstrap Multiselect

The functionality of Dropdown varies when using the .find().first() and .next() methods

ignore any anchors beyond the second index

How can I effectively vertically position a button in Bootstrap 5 without compromising its functionality?

Comparing Strict CSS with Hacky CSS - Which is the Better Choice?

What is the most efficient method for retrieving an element using a data attribute with an object (JSON) value?

The sidebar remains fixed in height and does not expand vertically