JSFiddle - React, Tailwind, and code Playground

HTML

<button type="button" id="mostrarOpcionesFiltrado" onclick="return mostrarFiltros.esconderFiltros();" class="btn btn-default btn-xs">Mostrar Opciones de Filtrado</button>

<div id="apellido" class="form-group sr-only">
	    <label for="exampleInputName2">Apellido</label>
	    <input type="text" class="form-control" name="apellido">
	  </div>
	  <div id="email" class="form-group sr-only">
	    <label for="exampleInputName2">Email</label>
	    <input type="text" class="form-control" name="email">
	  </div>
	  <div id="dni" class="form-group sr-only">
	    <label for="exampleInputName2">DNI</label>
	    <input type="text" class="form-control" name="dni">
	  </div>
	  <div id="username" class="form-group sr-only">
	    <label for="exampleInputName2">UserName</label>
	    <input type="text" class="form-control" name="username">
	  </div>

CSS

.sr-only {
  display:none;
}

JavaScript

var mostrarFiltros = {

	esconderFiltros: function() {
		if(document.getElementById('mostrarOpcionesFiltrado').clicked) {
			console.log('mostrando las opciones de filtrado');
		  	$('#apellido').removeClass('sr-only');
		    $('#email').removeClass('sr-only');
		    $('#dni').removeClass('sr-only');		    
		    $('#username').removeClass('sr-only');		    
		}	
	},
	
} //cierre del objeto mostrarFiltros