JSFiddle - React, Tailwind, and code Playground

by huppen

HTML

<div class="meta">
  <div class="nav">
    <a href="#"><i class="fa fa-home"></i></a>
  </div>
  <div class="nav">
    <i class="fa fa-phone">F</i>
    <div class="inithide">03381</div>
  </div>
  <div class="nav">
    <i class="fa fa-search">S</i>
    <div class="inithide">Suche</div>
  </div>
</div>

CSS

.meta {
  position: absolute;
  right: 0;
}

.meta .nav {
  float: left;
}

.meta i.fa {
  width: 40px;
  height: 30px;
  float: left;
  display: block;
  padding-top: 10px;
  text-align: center;
  background-color: #D2D2D2;
  border-left: 1px solid #FFFFFF;
  font-size: 1.2rem;
  line-height: 1.2rem;
  color: #FFFFFF;
}

.meta .inithide {
  height: 40px;
  float: left;
  display: none;
  padding-top: 10px;
  border-bottom: 1px solid #9B9B9B;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

JavaScript

$(".fa").click(function() {
	  $(".show").animate({
	    width: 0
	  }, 1000, function() {
	    $(this).hide();
	  });
	  var stretch = $(this).closest("div").find("div.inithide");
	  $(this).toggleClass("active");
	  $(stretch).toggleClass("show");
	  $(".active").not(this).toggleClass("active");

	  if (this.className.indexOf("active") > -1) {
	    var widthfrom = $(stretch).width();
	    var myDivWidth = "150px";
	    $(".show").css("display", "block");
	    $(".show").animate({
	      width: myDivWidth
	    }, 'slow');
	  }
	});