Mostrar e Ocultar

[lezão 0]

Boa tarde, a todos!

encontrei esse codigo na internet esta sendo muito util, eu só tem um item q eu gostaria de mudar.

e qnd entra na pagina naun aparecer o conteudo q esta em block, só aparecer qnd clicar na opção?

veja como fica qnd entra na pagina:

mostrar/ocultar.php

    <select id="tipo_pessoa" onchange="exibir_ocultar(this)">
    <option value="Dinheiro">Dinheiro</option>
    <option value="Cartão">Cartão</option>
</select>
<br /><br />
<div id="Dinheiro">Troco Para?: <br /><input type="number"></div>
<div id="Cartão">Aceitanos: <br /><img src="http://marmitexgranjaviana.com.br/wp-content/uploads/2020/07/aceitamos_todos_os_cart%C3%B5es_de_d%C3%A9bito_e_cr%C3%A9dito.png" width="400" height="100"/></div>

    <script type="text/javascript">
        function exibir_ocultar(val) {
  if(val.value == 'Cartão') {
    document.getElementById('Dinheiro').style.display = 'none';
    document.getElementById('Cartão').style.display = 'block';

  }
  else {
    document.getElementById('Dinheiro').style.display = 'block';
    document.getElementById('Cartão').style.display = 'none';
    
  }
};
    </script>

 

[ernestovm 0]

Experimenta colocar um css in-line nas DIVs dinheiro e cartão assim.

<div id="Dinheiro" style="display:none;">Troco Para?: <br /><input type="number"></div>
<div id="Cartão" style="display:none;">

 

[Jack Oliveira 1]

Ola boa tarde

Como o amigo disse ai colocar um style="display: none" em cada div cartão e dinheiro resolverá

Tente da seguinte forma e veja se resolve

 

<script>

function habilitarCampo() {
	//Dinheiro
    if(document.getElementById('tipo_pessoa').value == "Dinheiro"){
        document.getElementById('Dinheiro').style.display = "block";   //Div Ativa
        document.getElementById('Cartão').style.display = "none";    //Div Desativa		
    };
	
	//Cartão
    if(document.getElementById('tipo_pessoa').value == "Cartão"){
		document.getElementById('Dinheiro').style.display = "none";   //Div Desativa	 
        document.getElementById('Cartão').style.display = "block";   //Div Ativa

    };
	
   };	
</script>



<select id="tipo_pessoa"  class="form-control" onChange="habilitarCampo()" >
    <option value="Dinheiro">Dinheiro</option>
    <option value="Cartão">Cartão</option>
</select>
										

<div id="Dinheiro" style="display: none">Troco Para?: <br /><input type="number"></div>



<div id="Cartão"  style="display: none">Aceitanos: <br /><img src="http://marmitexgranjaviana.com.br/wp-content/uploads/2020/07/aceitamos_todos_os_cart%C3%B5es_de_d%C3%A9bito_e_cr%C3%A9dito.png" width="400" height="100"/></div>
								

 

[lezão 0]

Bom dia, ernestovm!

Tudo bem com você?

Acho que você naun entendeu oq eu estou querendo fazer,.

Quero q qnd eu entrar na pagina a opção Cartão fique oculta, só mostrar a opção Dinheiro, mas qnd eu escolher a opção Cartão ele aperece.

[HarryArcher 0]

muito obrigado acho que é útil

[lezão 0]

Bom dia, meus amigos!

Td bem com vcs?

Me desculpe a demora, mas quero agradecer a todos vcs q tirou alguns minutos do tempo de vcs para me ajudar.

 

Deu certo! VLW

 

Muito obrigado, que Deus os abençoem..