When writing documentation for programming tutorials, showcasing multiple code samples in various languages can become overwhelming. Instead of overwhelming readers with long blocks of code, providing an organized and user-friendly experience is essential. A tabbed interface is one of the most effective ways to achieve this.
A tabbed interface allows you to display code samples for multiple programming languages — such as JavaScript, Python, Ruby, Java, and more — within a single page. By clicking on different tabs, users can easily switch between languages without having to scroll through long sections of text. This not only saves space but also makes it easier for developers to find and compare language-specific implementations.
In this tutorial, we build a tabbed interface that can hold code samples in multiple languages. This approach is perfect for documentation sites, blogs, or any platform where you need to display code examples from various programming languages side by side. Whether you’re working on a tutorial for beginners or providing advanced coding references, this technique can enhance the accessibility and readability of your content.
Steps
1. Write the HTML structure.
The following HTML structure enables tabs for multiple programming languages. Each tab displays a code example for the selected language.
<div class="tab-container">
<!-- Tab buttons for different programming languages -->
<div class="tab-buttons">
<button class="tab-button active" onclick="openTab(event, 'js')">JavaScript</button>
<button class="tab-button" onclick="openTab(event, 'python')">Python</button>
<button class="tab-button" onclick="openTab(event, 'ruby')">Ruby</button>
<button class="tab-button" onclick="openTab(event, 'java')">Java</button>
</div>
<!-- JavaScript code example -->
<div id="js" class="tab-content active">
<h2>JavaScript Example</h2>
<pre><code>
function greet(name) {
return "Hello, " + name;
}
console.log(greet("World"));
</code></pre>
</div>
<!-- Python code example -->
<div id="python" class="tab-content">
<h2>Python Example</h2>
<pre><code>
def greet(name):
return "Hello, " + name
print(greet("World"))
</code></pre>
</div>
<!-- Ruby code example -->
<div id="ruby" class="tab-content">
<h2>Ruby Example</h2>
<pre><code>
def greet(name)
"Hello, " + name
end
puts greet("World")
</code></pre>
</div>
<!-- Java code example -->
<div id="java" class="tab-content">
<h2>Java Example</h2>
<pre><code>
public class Main {
public static void main(String[] args) {
System.out.println("Hello, World");
}
}
</code></pre>
</div>
</div>
2. Provide JavaScript functionality for tab switching.
The JavaScript handles showing and hiding the different code samples when the user clicks on a tab.
function openTab(event, tabId) {
// Get all elements with class="tab-content" and hide them
var tabContent = document.getElementsByClassName("tab-content");
for (var i = 0; i < tabContent.length; i++) {
tabContent[i].style.display = "none";
}
// Remove "active" class from all buttons
var tabButtons = document.getElementsByClassName("tab-button");
for (var i = 0; i < tabButtons.length; i++) {
tabButtons[i].classList.remove("active");
}
// Show the selected tab and add "active" class to the button
document.getElementById(tabId).style.display = "block";
event.currentTarget.classList.add("active");
}
// Initial setup to display the first tab (JavaScript) on page load
document.addEventListener("DOMContentLoaded", function () {
document.getElementById("js").style.display = "block";
});
3. Define the CSS styling for the tabs.
This adds the styling to the tabs, buttons, and code samples. The code displays in <pre> and <code> tags to preserve formatting.
.tab-container {
width: 100%;
max-width: 900px;
margin: 0 auto;
}
.tab-buttons {
display: flex;
border-bottom: 2px solid #ddd;
margin-bottom: 10px;
}
.tab-button {
background-color: #f1f1f1;
border: none;
padding: 10px 20px;
cursor: pointer;
transition: background-color 0.3s ease;
flex: 1;
text-align: center;
}
.tab-button.active {
background-color: #ddd;
font-weight: bold;
}
.tab-button:hover {
background-color: #f7f7f7;
}
.tab-content {
display: none;
padding: 20px;
border: 1px solid #ddd;
background-color: #f9f9f9;
}
.tab-content.active {
display: block;
}
h2 {
font-size: 1.5em;
margin-top: 0;
}
pre {
background-color: #2d2d2d;
color: #f8f8f2;
padding: 15px;
border-radius: 5px;
font-size: 16px;
overflow-x: auto;
}
code {
font-family: 'Courier New', Courier, monospace;
}
4. (Optional) Add more tabs for additional languages.
- Add a new
<button>in the.tab-buttonsdiv for the new language. - Create a new
<div>with a uniqueid(for example,id="cpp",id="go") for the code example of that language. - Follow the same pattern of JavaScript and CSS to ensure the new language tab works properly.
5. Deploy the code to your doc site.
- For static sites: You can include this code in your HTML files wherever you want to display the programming language tabs.
- For CMS (like WordPress): Use a custom HTML block in your page editor to add the code. If you have a free WordPress account, custom JavaScript, HTML, and CSS are restricted.
Try Your Code
Use a tool like CodePen to instantly see what your code looks like and if it works before incorporating it into your doc site.
Conclusion
This tabbed interface is a powerful way to showcase multiple programming language examples within a single documentation page. It keeps the page clean, organized, and easy to navigate, making it ideal for documentation sites that cater to developers who need examples in various languages. You can expand this interface to include as many languages as needed, offering an intuitive user experience for anyone visiting your documentation.
Double Yew! 