code-lang-tabs

Use jQuery-easy-tabs to display multiple code samples in tabs.

by ericcressey

HTML

<script src="https://os.alfajango.com/js/jquery.easytabs.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/themes/prism-okaidia.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.6.0/prism.js"></script>
<div class="example-container">
    <p>This fiddle shows how to put code samples into tabs using jQuery Easy Tabs, jQuery, and Prism for syntax highlighting. jQuery Easy Tabs is lightweight alternative to using jQueryUI.</p>

    <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">public class HelloWorld {

    public static void main(String[] args) {
        // Prints "Hello, World" to the terminal window.
        System.out.println("Hello, World");
    }

}</code></pre>
        </div>

        <div class="codeSample csharp" id="csharp2">
            <pre class="programlisting"><code class="language-csharp">public class Hello1
{
   public static void Main()
   {
      System.Console.WriteLine("Hello, World!");
   }
}</code></pre>
        </div>
        <div class="codeSample PHP" id="PHP3">
            <pre class="programlisting"><code class="language-php">&lt;?php echo '<p>Hello World</p>'; ?> </code></pre>
        </div>
    </div>

    <p>Further down your page, you may have another set of samples. When users click a language, all of the code samples on the page are updated to show that language.</p>
    <!-- Here's another set of code samples on the same page -->
    <div class="tab-container">
        <ul>
            <li class="tab Java"><a href="#Java4">Java</a></li>
            <li...

CSS

.tab {
    display: inline-block;
    zoom: 1;
    *display: inline;
    border: 1px solid #E7E7E7;
}

.tab-container > ul > li:first-child {
    border-radius: 0.3em 0em 0em 0.3em;
}

.tab-container > ul > li:last-child {
    border-radius: 0em 0.3em 0.3em 0em;
}

.tab a {
    font-size: 14px;
    line-height: 2em;
    display: block;
    padding: 0 10px;
    outline: none;
    text-decoration: none;
}

.tab a:hover {
    font-weight: bold;
}

.tab a.active {
    font-weight: bold;
    color: #0057A0;
}

.tab a:visited {
    color: #0057A0;
}

.tab.active {
    position: relative;
}

.tab:not(.active) a {
    color: grey;
}

.tab-container > ul {
    padding-left: 0px;
    margin: 0px 0px;
    padding-bottom: 5px;
}

li > div.tab-container {
    padding-top: 15px;
}

.example-container {
    height: 800px;
}

JavaScript

$(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');
        });
    });
});