JSFiddle - React, Tailwind, and code Playground

by Andrea Cabrero

HTML

<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css">
<a class="switch btn btn-default">pfff</a>
<span class="hidForm"><p style="text-align: justify;">dddddd</p></span>
<a class="switch2 btn btn-default">HAHAHA</a>
<span class="hideTel"><p style="text-align: justify;">burp burup burup...</p></span>

<p>
<input id="bank_account" name="bank_account" type="text" class="validate">
</p>

CSS

.hidForm {
  display: none;
}

.shown {
  display: block;
  border: 1px solid red;
}

.hideTel {
  display: none;
  position: fixed;
  right: 19.5%;
  top: 4.5%;
}

.showTel {
  display: block;
  color: #767676;
}

JavaScript

$('.switch').on('click', function(e) {
  $('.hidForm').toggleClass("shown"); //you can list several class names 
  e.preventDefault();
});

$('.switch2').hover(function(e) {
  $('.hideTel').toggleClass("showTel"); //you can list several class names 
  e.preventDefault();
});

$("#bank_account").mask("ES99/9999/9999/99/9999999999");

$("#bank_account").on("blur", function() {
    var last = $(this).val().substr( $(this).val().indexOf("-") + 1 );
    
    if( last.length == 3 ) {
        var move = $(this).val().substr( $(this).val().indexOf("-") - 1, 1 );
        var lastfour = move + last;
        
        var first = $(this).val().substr( 0, 9 );
        
        $(this).val( first + '-' + lastfour );
    }
});