Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

Kowalske

Controle de uma FAQ cm AJAX

Por , em Javascript

Recommended Posts

Kowalske    0

Kowalske
Postado

Boa noite a todos,

 

Estou criando uma tela de uma FAQ aqui para a empresa e eles pediram para que fizessem algom mais interativo. Pesquisando pela web achei um exemplo no site do CATHO mas não consegui clonar o código.

 

Veja o exemplo: SITE DO CATHO

 

Salvei a página mas quando executo algumas mudanças a página apresenta um erro de javascript alem de não funcionar direito.

 

O funcionamento é o seguinte:

 

temos 4 linhas

 

na primeira tem a pergunta com o lik que quando clicado exibe a linha 2 contendo a resposta.

 

se clicar na perguta que esta na linha 3 com o link

 

ele oculta a linha 2 e exibe a linha 4 e assim por diante.

 

alguem pode dar uma ajuda?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Otata    4

Otata
Postado

eae..bom não eh dificil isso apenas manipulação do css...

 

<html>
<head>
<script>
	function mostraEsconde(id){
		var obj = document.getElementById(id);
		if(obj.style.display == "none"){
			obj.style.display = "";
		}else{
			obj.style.display = "none";
		}
	}
</script>
</head>
<body>
	<table border=1>
		<tr style="background-color:gray">
			<td onclick="mostraEsconde('teste')">clique aqui</td>
		</tr>
		<tr id="teste" style="display:none">
			<td>Má oieeee</td>
		</tr>
	</table>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kowalske    0

Kowalske
Postado

o código do cara é enorme, usa ajax e php, será que falta algo para funcionar. vou testar a sua dica aqui.

 

 

eae..bom não eh dificil isso apenas manipulação do css...

 

<html>
<head>
<script>
	function mostraEsconde(id){
		var obj = document.getElementById(id);
		if(obj.style.display == "none"){
			obj.style.display = "";
		}else{
			obj.style.display = "none";
		}
	}
</script>
</head>
<body>
	<table border=1>
		<tr style="background-color:gray">
			<td onclick="mostraEsconde('teste')">clique aqui</td>
		</tr>
		<tr id="teste" style="display:none">
			<td>Má oieeee</td>
		</tr>
	</table>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Kowalske    0

Kowalske
Postado

Funcionou direitinho, mas falta uma coisa.

 

Digamos que quando clico em uma pergunta ele exibe a linha debaixo com a resposta, mas quando eu clico em outra pergunta ele mantem a linha anterior exibida, como faço para ocultar uma e exibir a outra?

Compartilhar este post

Link para o post
Compartilhar em outros sites

Otata    4

Otata
Postado

ta ai...acho que eh isso

 

t+

 

<html>
<head>
<script>
	function mostraEsconde(id){
		var obj = document.getElementById(id);
		fecharTodas(obj.parentNode,id);//pasando a tabela e o id
		if(obj.style.display == "none"){
			obj.style.display = "";
		}else{
			obj.style.display = "none";
		}
	}
	function fecharTodas(tabela,idAtual){
		var trs = document.getElementsByTagName('tr');
		for(i=0;i<trs.length;i++){
			if(trs[i].id != "" && trs[i].id != idAtual){
				trs[i].style.display = "none";
			}
		}
	}
</script>
</head>
<body>
	<table border=1>
		<tr style="background-color:gray">
			<td onclick="mostraEsconde('teste')">clique aqui</td>
		</tr>
		<tr id="teste" style="display:none">
			<td>Má oieeee</td>
		</tr>
		<tr style="background-color:gray">
			<td onclick="mostraEsconde('teste2')">clique aqui</td>
		</tr>
		<tr id="teste2" style="display:none">
			<td>Má oieeee</td>
		</tr>
		<tr  style="background-color:gray">
			<td onclick="mostraEsconde('teste3')">clique aqui</td>
		</tr>
		<tr  id="teste3" style="display:none">
			<td>Má oieeee</td>
		</tr>
	</table>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito