[Resolvido] Mostrar detalhes

[formigoni 0]

Olá, bom dia a todos.

Gostaria de uma dica.

 

Tenho uma página onde mostro, em duas colunas o resultado de uma pesquisa do meu banco de dados, agora para cada produto mostrado preciso criar uma forma de mostrar um detalhe específico de cada um.

 

Seria assim:

 

O cliente faz uma busca, mostro o resultado em duas colunas, o cliente clicaria em um sinal de "+" do produto da coluna dois e uma div deslizaria para baixo mostrando o detalhe daquele produto.

Tentei fazer como o lance do com div, mas ao clicar no sinal de + todas as divs de todos os produtos são abertas, alguém tem alguma dica de como posso controlar isso?

 

Se puderem me ajudar, agradeço.

Tenham um bom domingo e fiquem na paz.

[Matheus Tavares 167]

Postar o código é bom, e eu gosto. :)

 

Se você está utilizando jQuery, basta ser mais específico em sua seleção de objetos.

Sinceramente, não entendi muito bem, porém acho que você está na área errada. Todo caso, poste seu código para que possamos ajudar.

 

Abraço.

[Eliseu M. 2]

Isso não é feito em PHP, e sim com JavaScript. No princípio, tudo é carregado, depois o JS tem o trabalho de abrir o conteúdo correspondente a cada produto:

 

<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script>
function initMenu() {
  $('#menu ul').hide();
  $('#menu li a').click(
    function() {
        $(this).next().slideToggle('normal');	
      }
    );
  }
$(document).ready(function() {initMenu();});
</script>
   <ul id="menu">
     <li><a href="#">Produto 1</a>
     <ul>
       <li>Lalalalala</li>
     </ul>
     <li><a href="#">Produto 2</a>
     <ul>
       <li>Hahahaha</li>
     </ul>
   </ul>

[formigoni 0]

Olá, boa noite,

muito obrigado as pessoas que responderam até o momento, e seguindo a dica do H4X0R estou postando o script que tenho até o momento, veja:

 

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>

<script type="text/javascript">
$(document).ready(function () {
    $('#meio').hide();
    $('#mostrar').click(function (event) {
        event.preventDefault();
        $("#meio").show("slow");
    });
    $('#ocultar').click(function (event) {
        event.preventDefault();
        $("#meio").hide("slow");
    });
});
</script>
<style>
#top {background: url(images/tuto2.png) no-repeat; height: 28px; width:218px;}
#top a {text-decoration:none;}
#top img {float: left;}
#meio {background: url(images/tuto3.png); width:218px;}
#meio a {text-decoration:none;}
#meio img {padding: 0 190px;}
.texto {padding: 2px 8px; font: 12px Verdana; color: #6f6f6f;}
.titulo {text-align: center; padding: 5px; font: 13px Arial; font-weight: bold;}
</style>

e a div onde mostro o conteúdo:

 

<div id="box">
<div id="top">
  <div class="titulo">Detalhes de uso<a href="#" id="mostrar"><img src='imagens/mais.gif'></a></div></div>
<div id="meio"><div class="texto"><?php echo @mysql_result($busca,$i,veiculos); ?>
<br>
<br>
<a href="#" id="ocultar"><img src='imagens/menos.gif'></a>
</div></div>
<div id="ftr"></div>
</div>

Mas estou com um problema, após efetuar a pesquisa como indicado nesse post, o resultado é apresentado em duas colunas com 12 registros, a primeira div vem "fechada" mas as outras 11 ficam com o conteúdo exposto, como faço para que todas as div´s venham "fechadas" e somente abrir quando o usuário clicar no ícone "mais.gif"?

Tenho um outro problema, sempre que seleciono "mais" em um produto no meio da lista o script me "joga" para o começo da página.

Se puderem me ajudar novamente, agradeço.

Tenham uma boa noite e fiquem na paz.

[Matheus Tavares 167]

Olá.

 

Agora facilitou. Já notei alguns erros, mas não vou me precipitar e acabar deixando você confuso.

Se possível mande essa página para um host, para que possamos ver na prática.

 

Algumas dicas:

 

1 - Para selecionar mais de um objeto no programa, utilize CLASS, não ID. No jQuery ficaria $('.classe').

2 - Para ocultar todas as divs, com exceção da primeira, você pode fazer algo assim:

 

$('.div').not(':first')

 

3 - você poderia deixar seu código com toggle. Daí utilizava-se um único botão para expandir / ocultar a div, ao invés de 2.

 

Coisas de javascript, o ideal é sempre mostrar um exemplo prático. Fica mais fácil de visualizar o problema.

 

Até mais.

[formigoni 0]

Olá, bom dia

Estou colocando o link aqui para visualização do caso, vejam:

 

Página de Busci

 

Ao entrar na página, por favor, faça uma busca por "externo" no campo "palavra chave", o resultado aparecerá em duas colunas, como disse no post.

Se puderem me ajudar, vou agradecer.

 

Valeu e fiquem na paz.

[Matheus Tavares 167]

Seu site está com MUITOS erros, inclusive de segurança.

Sobre o problema em questão, faça o que eu disse anteriormente. Nos objetos que aparecerem mais de uma vez no código, utilize class, não ID.

 

Segue print screen no FF e no IE.

 

http://www.haxor.com.br/problemas.JPG

http://www.haxor.com.br/problemasIE.JPG

 

Até mais.

[formigoni 0]

Olá H4X0R,

O erros apontados já estavam identificados, mas estou priorizando a tentativa de acerto no detalhe do produto, mas mesmo assim muito obrigado.

Teria como me dar um exemplo para mudar o que tenho no momento?

 

Valeu e fique na paz.

[Matheus Tavares 167]

Você fez a mudança dos ID repetidos para class?

[formigoni 0]

Olá, boa tarde,

sinceramente, não estou conseguindo fazer nada, nem mesmo mudar os ID repetidos para class e muito menos ocultar as divs.

Estou apanhando feio com isso.

 

Valeu e fiquem na paz

[Matheus Tavares 167]

Ué, não entendi.

 

Basta trocar id="xxx" por class="xxx" em todos os que se repetem.

E tanto no css quanto no JS, chamar por .xxx, ao invés de #xxx.

 

Não se pode utilizar dois IDs iguais no mesmo código.

 

Até mais.

[formigoni 0]

Olá H4X0R,

 

Muito obrigado pela paciência, agora a coisa está fruindo.

Muito obrigado.