JSFiddle - React, Tailwind, and code Playground

by Louis Barranqueiro

HTML

<button class="button-code-selector" data-lang="ts">TypeScript</button>
<button class="button-code-selector" data-lang="js">JavaScript</button>
<div>
  <div class="codeblock js">
    var geolocation = require("nativescript-geolocation");
  </div>
  <div class="codeblock ts">
    import geolocation = require("nativescript-geolocation");
  </div>
</div>

JavaScript

function switchCodeBlock(lang) {
	// js as default language
	lang = lang || 'js';
  // save language in session. you can also use local storage or cookies.
  sessionStorage.setItem('code-lang', lang);
  // hide all codeblocks
  $('.codeblock').hide();
  // and only display codeblocks with current language
  $('.codeblock.' + lang ).show();
}


// executed when HTML document has been loaded
$(document).ready(function() {
	// display default codeblock : js
	switchCodeBlock();

  // on click we switch to the selected language
	$('.button-code-selector').click(function() {
	  var lang = $(this).data('lang'); 
	  var currentLang = sessionStorage.getItem('code-lang');
	  // language does not changed
	  if (lang === currentLang) {
	    return;
	  }
	  switchCodeBlock(lang);
	});
});