Template:codetabs

This is a (currently experimental) way of showing code snippets with tabs to switch between different formats

How to use
It's not pretty but you can create up to 9 tabs with a title and content. The content field seems to work with any wiki formatting you want.

This example shows how to render html, show html markup and show json markup

Which results in

.grantcodes-codetabs { display: block; overflow: hidden; border: 1px solid; } .grantcodes-codetabs__title { margin: 0; padding: 10px; border-bottom: 1px solid; } .grantcodes-codetabs__tab { display: block; } .grantcodes-codetabs__tab__title { font-size: 1em; margin: 0 !important; padding: 0 10px; } .grantcodes-codetabs__tab__code { margin: 0; padding: 10px; } .grantcodes-codetabs__tab__code.is-hidden { display: none; } .grantcodes-codetabs__nav { background: #eee; border-bottom: 1px solid; line-height: 0; } .grantcodes-codetabs__nav .grantcodes-codetabs__tab__title { display: inline-block; cursor: pointer; border-right: 1px solid; } .grantcodes-codetabs__nav .grantcodes-codetabs__tab__title.is-selected { background: lightblue; } (function { var codeTabContainers = document.querySelectorAll('.grantcodes-codetabs'); codeTabContainers.forEach(function (container) { if (!container.classList.contains('is-tabbed')) { container.classList.add('is-tabbed'); var tabs = container.querySelectorAll('.grantcodes-codetabs__tab'); var nav = document.createElement('div'); nav.className = 'grantcodes-codetabs__nav'; tabs.forEach(function (tab, tabIndex) { var title = tab.querySelector('.grantcodes-codetabs__tab__title'); var code = tab.querySelector('.grantcodes-codetabs__tab__code'); code.classList.add('is-hidden'); title.remove; title.addEventListener('click', function (e) { container.querySelectorAll('.grantcodes-codetabs__tab__code') .forEach(function (tmpCode) { tmpCode.classList.add('is-hidden'); }); container.querySelectorAll('.grantcodes-codetabs__tab__title') .forEach(function (tmpTitle) { tmpTitle.classList.remove('is-selected'); }); title.classList.add('is-selected'); code.classList.remove('is-hidden'); }); if (tabIndex === 0) { title.classList.add('is-selected'); code.classList.remove('is-hidden'); } nav.appendChild(title); }); container.insertBefore(nav, tabs[0]); } }); });