Gamepedia Help Wiki
Advertisement

This is a small JavaScript that uses JQuery in order to make tabs. While there are extension that do this already, sometimes it's nice to be able to build tabs from scratch. This comes with no style or structure and only has minor requirements in order to function.

The JavaScript

/***************
 * Simple Tabs *
 ***************/

/* Hide tab contents besides those that are shown by default. */
$('.simple-tab-content').hide();
$('.simple-tab.selected').each(function () {
    $('#' + $(this).attr('data-tab-content')).show();
});


/* Handle click events. */
$('.simple-tab').click(function () {
    $(this).siblings('.simple-tab').removeClass('selected');
    $(this).addClass('selected');
    var tabContent =  $('#' + $(this).attr('data-tab-content'));
    $(tabContent).siblings('.simple-tab-content').hide();
    $(tabContent).show();
});

Using simple tabs

Simple tabs has a relatively small set of conditions to operate.


Guidelines for the CSS
  • The currently active tab will have the .selected class. While styling this class is highly recommenced, it isn't strictly required.


Guidelines for the html
  • Tabs of a given group should be siblings, while the tab contents of a given group should also be siblings. Note that the tabs do not need to be siblings with the tab contents.
  • Each tab content should have a unique id, which is pointed to by the data-tab-content attribute on the corresponding tab.
  • The default tab of a group should have the 'selected' class, so that it is selected when the page first loads.
    Note: It is possible to have no tab open by default if desired, in which case the selected class can be left out of the html.

Anything else about the tabs is left up to the person making them, such as the types of elements use, what the tabs look like, and were the tabs are placed in relation to the tab contents.

Example simple tabs

This would make some orange and dark gray tabs, which are place below their content. By using containers, rather than styling .simple-tab and .simple-tab-content directly, this code leaves those classes unstyled, so that there are no conflicts if a different style of tabs is needed elsewhere.

HTML
<div class="example-tabs">
<div class="simple-tab-content" id="example-tab-1">
Tab 1 content
</div>
<div class="simple-tab-content" id="example-tab-2">
Tab 2 content
</div>
<div class="simple-tab-content" id="example-tab-3">
Tab 3 content
</div>
<div class="example-tab-nav">
<div class="simple-tab selected" data-tab-content="example-tab-1">Tab 1</div>
<div class="simple-tab" data-tab-content="example-tab-2">Tab 2</div>
<div class="simple-tab" data-tab-content="example-tab-3">Tab 3</div>
</div>
</div>
CSS
.example-tabs > .simple-tab-content {
    height: 300px;
    background: #edeeee;
}

.example-tab-nav {
    background: #141414;
    color: #f58120;
}

.example-tab-nav > .simple-tab {
    padding: 0 1.5em;
    cursor: pointer;
    display: inline-block;
    line-height: 3em;
}

.example-tab-nav > .simple-tab:hover {
    text-decoration: underline;
}

.example-tab-nav > .simple-tab.selected {
    background: #f58120;
    color: #ffffff;
}
Advertisement