The code causes the search button to disappear and an input to enter the search will appear immediately
$('#dispara').on('click', function (event) {
event.preventDefault();
$('form div').addClass('active');
$('#dispara').css("display", "none");
//$('#caixa').focus();
document.form1.caixa.focus(); //coloca o focu no input para ativar teclado do celular
});
$('#retorna').on('click', function (event) {
event.preventDefault();
$('form div').removeClass('active');
//$('#caixa').blur();
document.form1.caixa.blur(); //retira o focu no input para desativar teclado do celular
$('#dispara').css("display", "block");
});form {
position:relative;
}
form div {
position:absolute;
top:0;
left:-100%;
width:100%;
overflow:hidden;
transition:all 1s ease-in;
}
form div.active {
left:0;
}
#retorna{
float:right;
}
#dispara{
margin:8px 0px 0px 0px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><headerdata-role="header" data-position="fixed">
<h3 style="float:left;">Troca games</h3>
<form name="form1">
<button id="dispara" class="ui-btn ui-icon-search ui-btn-icon-notext ui-corner-all">Slide In!</button>
<div>
<input type="text" name="caixa"/>
<button id="retorna" class="ui-btn ui-icon-arrow-l ui-btn-icon-notext">No text</button>
</div>
</form>
<!-- Início navegação principal -->
<nav data-role="navbar">
<ul>
<li><a href="#esquerda"><img src="images/configuracoes.png"/></a></li>
<li><a href="home.php"><img src="images/home.png"/></a></li>
<li><a href="trocas.php"><img src="images/trocas.png"/></a></li>
<li><a href="jogos.php"><img src="images/jogos.png"/></a></li>
<li><a href="desejos.php"><img src="images/desejos.png"/></a></li>
</ul>
</nav>
</header>Page where the code is being called
<?php include 'restrictions.php'?>
<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Troca Games - Games com economia</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" type="text/css" href="css/jquery.mobile-1.4.5.min.css">
<script type="text/javascript" src="js/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="js/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div data-role="page">
<?php include 'header.php'?>
<?php include 'sidebar_conf.php'?>
<!-- data-position="fixed" fica fixo o menu -->
<!-- Início principal -->
<section data-role="content" style="padding:0;">
<div class="titulo">
<center><h1>Meus jogos</h1></center>
</div>
<?php include_once'meus_jogos.php' ?>
<div class="titulo">
<center><h1>Meus desejos</h1></center>
</div>
<?php include_once'meus_desejos.php' ?>
</section>
</div>
</body>
</html>