2
I need to show a form using a button and hide it when the user presses another button, because the other button should show a table fed with database data. I used the following answer as a basis and managed to hide and show the form but when trying to do something similar with the table the site Buga and both are overlapped.
NOTE: I am using bootstrap 4 and jquery-3.4.1
<?php
include ('menu.php');
?>
<link rel="stylesheet" type="text/css" href="./assets/css/painel.css">
<main role="main" class="col-md-9 ml-sm-auto col-lg-10 px-4">
<div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
<h1 class="h2">Clientes</h1>
</div>
<div id="container">
<!--
########################################################################################################################################################### BUTTONS ###################################################################################################################################################################-->
<button type="button" class="btn btn-success" onclick="Mudarestado('formulario')">Novo</button>
<button type="button"class="btn btn-secondary" onclick="#">Listar</button>
<!--
########################################################################################################################################################### FORMULARIO ################################################################################################################################################################-->
<form id="formulario" method="POST" action="cadastrar.php">
<div class="form-row">
<div class="col">
<label for="inputNome">Nome</label>
<input type="text" class="form-control" id="Nome" placeholder="Primeiro Nome">
</div>
<div class="col">
<label for="inputSobrenome">Sobrenome</label>
<input type="text" class="form-control" id="Sobrenome" placeholder="Ultimo Nome">
</div>
</div>
<div>
<br>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="sexo" value="Masculino">
<label class="form-check-label" for="Radio1">Masculino</label>
</div>
<div class="form-check form-check-inline">
<input class="form-check-input" type="radio" name="sexo" value="Feminino">
<label class="form-check-label" for="Radio2">Feminino</label>
<br>
</div>
</div>
<div class="form-row">
<div class="form-group col-md-2">
<label >CPF</label>
<input type="text" class="form-control" name="CPF" id="CPF" placeholder="000.000.000-00">
</div>
<div class="form-group col-md-">
<label for="inputAddress">Endereço</label>
<input type="text" class="form-control" id="Endereço" placeholder="RAU-SC">
</div>
</div>
<div class="input-group-prepend" style="display:inline-block; vertical-align: middle;">
<button class="btn btn-outline-success" type="button">Savar</button>
<button class="btn btn-outline-secondary" type="button">Cancelar</button>
</div>
</form>
<table class="table">
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">Nome</th>
<th scope="col">Sobrenome</th>
<th scope="col">CPF</th>
</tr>
</thead>
<tbody>
<tr>
<!--
dados manuais...
não esquecer de fazer as inserção dos dados do banco
-->
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>
</main>
<script type="text/javascript" src="./assets/js/painel.js"></script>
<script type="text/javascript" src="./assets/js/jquery-3.4.1.min.js"></script>
<script type="text/javascript" src="./assets/js/jquery.mask.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#CPF").mask("000.000.000-00")
})
</script>
function Mudarestado(el) {
document.getElementById(el).classList.toggle('mostrar');
}#formulario {
opacity: 0;
transition: opacity 1.5s;
border: 1px solid #ccf;
padding: 1em;
width: 78em;
position: absolute;
}
#formulario.mostrar {
opacity: 1;
}
#tabela {
opacity: 0;
transition: opacity 1.5s;
border: 1px solid #ccf;
padding: 1em;
width: 78em;
position: absolute;
}
#tabela.mostrar {
opacity: 1;
}
Edit your question, are you using bootstrap? Which version? Cade your complete script to hide and hide the elements? And if you have created some extra css besides the original bootstrap put tbm the CSS that you made, without this can not answer you
– hugocsl