Tenho duas divs, cujos conteúdos abrigarão alguns fields específicos da minha page. Preciso manter tais divs sempre escondidas, de maneira que quando necessário, eu oculte uma e exiba a outra e vice-versa. Para isso, criei 4 funções.
Não sei o que estou fazendo de errado, nem sei se é o caminho correto a seguir, mas não está funcionando (Problema: Não estou conseguindo ocultar uma div e abrir a outra e vice-versa, simplesmente elas desaparecem da tela). Alguém sabe como me ajudar?
HTML
<div id="divBuscarCpfCnpj" class="search">
</div>
<div id="div-pessoa-fisica-juridica" class="div-pessoa-fisica-juridica1">
</div>
JavaScript
function exibirPainelConsultarCpfCnpj() {
$(this).toggleClass();
$("#divBuscarCpfCnpj").slideToggle();
}
function ocultarPainelConsultarCpfCnpj() {
$("#divBuscarCpfCnpj").slideToggle();
}
function exibirPainelPessoaFisicaJuridica() {
$(this).toggleClass();
$("#div-pessoa-fisica-juridica").slideToggle();
}
function ocultarPainelPessoaFisicaJuridica() {
$("#div-pessoa-fisica-juridica").slideToggle();
}
Assim, não está funcionando. As duas divs estão se mantendo visíveis:
let divBuscarCpfCnpj = document.querySelector('.divBuscarCpfCnpj');
let divPessoaFisicaJuridica = document.querySelector('.div-pessoa-fisica-juridica1');
function exibirPainelConsultarCpfCnpj() {
if (divBuscarCpfCnpj.style.display == 'none') {
divBuscarCpfCnpj.style.display = 'block';
}
}
function ocultarPainelConsultarCpfCnpj() {
if (divBuscarCpfCnpj.style.display == 'block') {
divBuscarCpfCnpj.style.display = 'none';
}
}
function exibirPainelPessoaFisicaJuridica() {
if (divPessoaFisicaJuridica.style.display == 'none') {
divPessoaFisicaJuridica.style.display = 'block';
}
}
function ocultarPainelPessoaFisicaJuridica() {
if (divPessoaFisicaJuridica.style.display == 'block') {
divPessoaFisicaJuridica.style.display = 'none';
}
}