Eric Cressey

Tech writer - Content strategist - Developer

Displaying multi-language code samples using jQuery EasyTabs

| Comments

If your API documentation includes code samples in a few languages, put the samples in tabs and let users select the language they want. Users see samples in their preferred language and you end up with a shorter topic that’s much easier to navigate because it only includes samples your user wants to see.

It’s pretty easy to organize your code samples by tabs. In this example, I’m going to show you how to do it with an open source jQuery plugin called EasyTabs.

HTML

Here’s the basic HTML structure for your tabs.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19

<div class="tab-container">
    <ul>
        <!--The div for each code sample needs a unique ID, so we append a number to each -->
        <li class="tab Java"><a href="#Java1">Java</a></li>
        <li class="tab csharp"><a href="#csharp2">C#</a></li>
        <li class="tab PHP"><a href="#PHP3">PHP</a></li>
    </ul>

    <div class="codeSample Java" id="Java1">
        <pre class="programlisting"><code class="language-java">Java code here</code></pre>
    </div>

    <div class="codeSample csharp" id="csharp2">
        <pre class="programlisting"><code class="language-csharp">C# code here</code></pre>
    </div>
    <div class="codeSample PHP" id="PHP3">
        <pre class="programlisting"><code class="language-php">PHP code here</code></pre>
    </div>
</div>

All your tabs go into a tab-container div. The div contains an unordered list with a list item for each tab that links to the div where the code sample is.

In addition to the HTML markup, there’s some JavaScript to add to the page. JavaScript changes the tab on user click and makes sure that each set of code samples on the page is showing the same language tab.

If you are adding this feature to a single-page help output, you may need to add additional JavaScript to make sure the scroll position stay in the right place as the user changes languages.

JavaScript

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

$(document).ready(function() {
    'use strict';

    //only add tabs if there are multiple languages
    if ($('div.tab-container').length > 0) {
        $('div.tab-container').easytabs({
            animate: false,
            updateHash: false
        });
    }
    //switch all code samples to selected language on click
    $('div.tab-container ul li.tab').click(function() {

        //get the language from the active link href
        var codeLang = $(this).find('a.active').attr('href');
        //remove number and hash to get lang value without unique identifier.
        codeLang = codeLang.replace("#", "").replace(/\d/g, "");

        //find and update each set of code samples on the page
        $('div.tab-container ul li.' + codeLang).each(function() {

            // make the tab active and hide the other tabs
            $(this).addClass('active').siblings().removeClass('active');
            $(this).siblings().find('a').removeClass('active');
            $(this).find('a').addClass('active');

            //show the appropriate code sample, hide the others
            $(this).parent().siblings('div.' + codeLang).addClass('active').css('display', 'block');
            $(this).parent().siblings('div.codeSample').not('.' + codeLang).removeClass('active').css('display', 'none');
        });
    });
});

Results

Here’s what it looks like with prism.js syntax highlighting. Try it in JSFiddle

Comments