Show/Hide Divs using functions - Javascrip and Asp.Net Core MVC

Question

I have two Divs, whose contents will house some Fields specific to my page. I need to keep such Ivs always hidden, so that when necessary, I hide one and display the other and vice versa. For this, I created 4 functions... I don’t know what I’m doing wrong, I don’t know if it’s the right way to go, but it’s not working (Problem: I can’t hide one div and open the other and vice versa... simply, they disappear from the screen...). Someone knows how to help me?

HTML

<div id="divBuscarCpfCnpj" class="search">

</div>
<div id="div-pessoa-fisica-juridica" class="div-pessoa-fisica-juridica1">

</div>

Javascrip

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();       
}

Thus, it is not working. The two Divs are staying visible:

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';
    }
}

Answer 1

I had done something similar days ago to a client, where the Divs are hidden and on onclick active the corresponding div by id, when I did I also broke a little head to find something to do that, if you go see the font, will give you a little work because it is wordpress and this within an editor, the elementor, it changes the original structure....

in javascript you do so:

<script> 
function exibirPainelConsultarCpfCnpj(){ 
var div = document.getElementById('divBuscarCpfCnpj') 
/* se conteúdo está escondido, mostra e troca o valor do botão para: esconde */ 
if (div.style.display == 'none') {
document.getElementById("div-pessoa-fisica-juridica").style.display = 'none'; //ocultar
document.getElementById("id_da_div").style.display = 'none'; //ocultar
document.getElementById("id_da_div").style.display = 'none'; //ocultar
document.getElementById("botao").value='esconde' 
div.style.display = 'block' 
} else { 
/* se conteúdo está a mostra, esconde o conteúdo e troca o valor do botão para: mostra */ 
div.style.display = 'none' 
document.getElementById("botao").value='mostra' 
} 
} 
</script>

there on the button you call the function:

<a href="#procedimentos" id="botao" value="mostra" onclick="exibirPainelConsultarCpfCnpj()"></a>

ai there in id_da_div you put the id of div or other thing you want to hide, to show the other makes the same way reversing values:

<script> 
function exibirPainelPessoaFisicaJuridica(){ 
var div = document.getElementById('div-pessoa-fisica-juridica') 
/* se conteúdo está escondido, mostra e troca o valor do botão para: esconde */ 
if (div.style.display == 'none') {
document.getElementById("divBuscarCpfCnpj").style.display = 'none'; //ocultar
document.getElementById("id_da_div").style.display = 'none'; //ocultar
document.getElementById("id_da_div").style.display = 'none'; //ocultar
document.getElementById("botao").value='esconde' 
div.style.display = 'block' 
} else { 
/* se conteúdo está a mostra, esconde o conteúdo e troca o valor do botão para: mostra */ 
div.style.display = 'none' 
document.getElementById("botao").value='mostra' 
} 
} 
</script>

you can see here: https://clinicafabrini.com.br/servicos/

Answer 2

if you want one to appear only one or the other you can do an if for when one is with the None display the other becomes display block.

let busca = document.querySelector('.search');
let pessoas = document.querySelector('.div-pessoa-fisica-juridica1');

function esconder() {

   if(busca.style.display === 'none'){
      pessoas.style.display = 'block';
   }else{
      pessoas.style.display = 'none';
   }
}