1

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';
    }
}
2
  • mais ai você mostra a div no caso ali pessoa fisica, ao clicarem em um botão ou campo não é isso? Commented 11/10/2019 às 21:42
  • Eu chamo ocultarPainelPessoaFisicaJuridica() e depois exibirPainelConsultarCpfCnpj() no evento load da page...
    – Master JR
    Commented 11/10/2019 às 22:08

2 Respostas 2

0

eu tinha feito algo parecido dias atras para uma cliente, onde as divs ficam ocultas e no onclick ativa a div correspondente pelo id, quando fiz também quebrei um pouco a cabeça para achar algo que faça isso, se você for ver o font, vai te dar um pouco de trabalho porque é wordpress e esta dentro de um editor, o elementor, ele troca a estrutura original....

no javascript você faz assim:

<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>

ai no botão você chama a função:

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

ai ali em id_da_div você coloca o id da div ou de outra coisa que você queira esconder, para mostrar a outra faz o mesmo caminho invertendo os valores:

<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>

você pode ver aqui: https://clinicafabrini.com.br/servicos/

2
  • 1
    obrigado @Macedo_Montalvão!!! Funcionou 100% :)
    – Master JR
    Commented 11/10/2019 às 23:09
  • que bom amigo, precisando : ) Commented 11/10/2019 às 23:21
0

caso vc queira q uma só apareça uma ou outro vc pode fazer um if para quando uma estiver com o display none a outra passa a ser 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';
   }
}
2
  • Olá @Hugo Mendonça! Infelizmente, não funcionou... no evento Load da page eu exibo uma div e fecho a outra, mas as duas estão ficando fixas ao mesmo tempo...
    – Master JR
    Commented 11/10/2019 às 21:19
  • Eu editei o post principal com a sua sugestão para vc ver como fiz...
    – Master JR
    Commented 11/10/2019 às 21:23

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .