JSFiddle - React, Tailwind, and code Playground

by slawe

HTML

<div class="page-flags">
    <a href="#" class="flag-fr"></a>
    <a href="#" class="flag-en"></a>
</div>

CSS

.page-flags {
    display: block;
    position: absolute;
    min-width: 20%;
    height: 50px;
    float: left;
    margin: 20px;
    border: 2px solid greenyellow;
}

a.flag-fr {
    display: inline-block;
    position: relative;
    text-align: center;
    width: 48px;
    height: 38px;
    border: 1px solid red;
    -moz-transition: all 0.3s ease-in;
    -webkit-transition: all 0.3s ease-in;
    -o-transition: all 0.3s ease-in;
    transition: all 0.3s ease-in;
}

a.flag-en {
    display: inline-block;
    position: relative;
    text-align: center;
    width: 48px;
    height: 38px;
    border: 1px solid red;
}

JavaScript

var toggle = function(id) {
  var mydiv = document.querySelector(id);
        
  if (mydiv.style.width === '48px' || mydiv.style.width === '310px')
    mydiv.style.width = '';
  else
    mydiv.style.width = '310px'
  }

var __a = document.querySelector('.flag-fr');

__a.addEventListener('click', function(e){
    e.preventDefault();
    toggle('.flag-fr');
}, false);