Uma solução simples é adicionar a classe do Bootstrap `.d-none` aos campos que irão aparecer escondidos inicialmente, e acrescentar uma classe qualquer (coloquei `.f`) nos mesmos campos para você poder controlá-los. Nos links do menu você coloca um dataset `data-f` com respectivos valores dos `name` dos campos. Assim, ao clicar em um link do menu, irá mostrar apenas o campo que possui o `name` igual ao `data-f` do link clicado, removendo a classe `d-none`: <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> $(".search-panel .dropdown-menu a").click(function(e){ e.preventDefault(); $(".f").addClass("d-none"); $("[name='"+this.dataset.f+"']").removeClass("d-none"); }); <!-- language: lang-html --> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js" integrity="sha384-b/U6ypiBEHpOf/4+1nzFpr53nxSS+GLCkfwBdFNTxtclqqenISfwAzpKaMNFNmj4" crossorigin="anonymous"></script> <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css"> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script> <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <div class="row"> <div class="col-md-6"> <div class="input-group"> <div class="input-group-btn search-panel"> <button type="button" class="btn btn-inverse dropdown-toggle" data-toggle="dropdown"> <span id="search_concept">Filtrar por...</span> <span class="caret"></span> </button> <ul class="dropdown-menu" role="menu" style="padding: 10px"> <li><a href="#" data-f="Nome"><i class="fas fa-caret-right"></i> Nome</a></li> <li><a href="#" data-f="Data"><i class="fas fa-caret-right"></i> Mês e ano</a></li> <li class="divider"></li> <li><a href="#" data-f="Todos"><i class="fas fa-caret-right"></i> Todos</a></li> </ul> </div> <input type="text" class="form-control d-none f" name="Nome" placeholder=" Filtrar por nome"> <input type="date" class="form-control d-none f" name="Data" placeholder=" Filtrar por data"> <input type="text" class="form-control d-none f" name="Todos" placeholder=" Filtro por todos os registros"> <input type="text" class="form-control f" placeholder=" Selecione o filtro ao lado"> <span class="input-group-btn"> <button class="btn btn-inverse" type="button"><i class="fas fa-search"></i></button> </span> </div> </div> </div> <!-- end snippet --> **Umas observações:** Em vez de usar: $('.search-panel .dropdown-menu').find('a') Você pode usar: $('.search-panel .dropdown-menu a') É mais curto e evita usar um método a mais, o `.find()`. Outra coisa é que não faz sentido usar o seletor: '.search-panel span#search_concept' Como um `id` deve ser único, basta ir direto a ele: '#search_concept'