JSFiddle - React, Tailwind, and code Playground

by MarkSchultheiss

HTML

<div id="articles">
  <div class="article" data-languagedefault="fr">
    <div class="flags">
      <ul class="myflags">
        <li>
          <button class="default" type="button">Default</button>
        </li>
      </ul>
    </div>
    <div class="container">
      <span class="content" lang="fr" data-language="fr">I am french</span>
      <span class="content" lang="gb" data-language="gb">I am gb</span>
      <span class="content" lang="tr" data-language="tr">I am tr</span>
      <span class="content" lang="en-us" data-language="en-us">I am en-us</span>
      <span class="content" lang="en-gb" data-language="en-gb">I am en-gb</span>
    </div>
  </div>
</div>

CSS

span.content {
  border: solid lime 1px;
}

.container {
  clear: both;
}

.myflags>li {
  float: left;
  display: inline-block;
  border: solid blue 1px;
}

.myflags>li.active {
  border: solid red 1px;
}

JavaScript

console.clear();
$(document).ready(function() {
  (function($) {
    $.fn.filterByData = function(prop, val) {
      var $self = this;
      if (typeof val === 'undefined') {
        return $self.filter(function() {
          return typeof $(this).data(prop) !== 'undefined';
        });
      }
      return $self.filter(function() {
        return $(this).data(prop) == val;
      });
    };
  })(window.jQuery);
  // setup all flags from data
  $('#articles').find('.article').find('.content').each(function(index) {
    var lang = $(this).data('language');
    $('.flags').find('.myflags')
      .append('<li><button class="flag" data-language="' + lang + '" type="button">' + lang + '</button></li>');
  });
  // show active button
  $('li').on('activate', function() {
    $(this).addClass('active').siblings().removeClass('active');
  });
  //set currently active language indicator and language
  function setLang(me) {
    var lang = $(me).data('language');
    $(".content:lang(" + lang + ")").show().siblings('.content').hide();
    $(me).parent('li').trigger('activate');
    var defaultLang = $(me).parents('.article').eq(0).data('languagedefault');
    var isDefault = defaultLang == lang;
    $('#articles').find('.article').find('.myflags').find('button.default').toggle(!isDefault);
  }
  $('#articles').find('.article').find('.myflags').on('click', 'button.flag', function() {
    setLang(this);
  });
  $('#articles').find('.article').find('.myflags').on('click', 'button.default', function() {
    var defaultLang = $(this).parents('.article').eq(0).data('languagedefault');
    var flag = $('.flag').filterByData('language', defaultLang);
    setLang(flag);
  });
});