Célio A. 4 Denunciar post Postado Setembro 10, 2014 É o seguinte. Tenho um banco de dados com dados de atletas. O que gostaria de fazer é que fosse exibido os nomes em ordem eu usar uma função parecida com a citada abaixo para mostrar o perfil do atleta. A intenção seria mostrar uma lista apenas com o nome e ao clicar no nome exibira o restante do perfil. Ex. Fulano de tal (clica em fulano de tal para exibir o restante do perfil) idade clube graduação Vi este código de jQuery toggle que ilustra oque pretendo: http://www.maujor.com/blog/pg_apoio/jquery-toggle-texto-exemplo.html Mas não entendo muito de jQuery para deixar como eu quero, ou seja, aparecer o nome do atleta e não um texto padrão. Por enquanto tenho o seguinte cod, mas ainda esta longe do que eu quero. Se pelo menos o conteudo oculto fosse exibido acima: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" lang="pt-br"> <head> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <title>Toggle texto</title> <style type="text/css" media="all"> #box-toggle { width:500px; margin:0 auto; text-align:justify; font:12px/1.4 Arial, Helvetica, sans-serif; } #box-toggle .tgl {margin-bottom:30px;} #box-toggle span { display:block; cursor:pointer; font-weight:bold; font-size:14px; color:#c30; margin-top:15px; } </style> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> <script type="text/javascript"> jQuery.fn.toggleText = function(a,b) { return this.html(this.html().replace(new RegExp("("+a+"|"+b+")"),function(x){return(x==a)?b:a;})); } $(document).ready(function(){ $('.tgl').before('<span>Mostrar perfil</span>'); $('.tgl').css('display', 'none') $('span', '#box-toggle').click(function() { $(this).next().slideToggle('slow') .siblings('.tgl:visible').slideToggle('fast'); $(this).toggleText('Revelar','Esconder') .siblings('span').next('.tgl:visible').prev() .toggleText('Revelar','Esconder') }); }) </script> </head> <body> <?php if(file_exists("conectar.php")) { require "conectar.php"; } else { echo "Arquivo conectar.php nao foi encontrado"; exit; } //seleciona o banco de dados mysql_select_db("$banco", $conexao); $query_lista = mysql_query("SELECT k.nome, g.faixa, c.cidade, s.id FROM karateca k INNER JOIN cidade c ON k.cidade_fk = c.id INNER JOIN graduacao g ON k.graduacao_fk = g.id INNER JOIN genero s ON k.genero_fk = s.id ORDER BY g.id DESC "); while($lista = mysql_fetch_array($query_lista)) { echo '<div id="box-toggle">'; echo "<h3>$lista[nome]</h3>"; echo '<div class="tgl">'; echo "<p>Faixa: $lista[faixa]</p>"; echo "<p>Cidade: $lista[cidade]</p>"; echo '</div>'; } echo '</div>'; echo '</body>'; echo '</html>'; ?> Compartilhar este post Link para o post Compartilhar em outros sites
adriano.lopes 1 Denunciar post Postado Setembro 10, 2014 É simples, na sua div que mostra a cidade você tem que colocar um identificador único, por exemplo, class="tgl_IDDOREGISTO". Depois você captura o click do nome do atleta e usa o toggle, exemplo: <style> .atleta_perfil {display:none} </style> <script> $(".atleta[id^="atleta_").click(function(){ var idAtleta = $(this).attr("id"); idAtleta = idAtleta.replace(/[^\d]+/g,''); $("#atleta_perfil_" + idAtleta).toggle(); }); </script> <a href="#" class="atleta" id="atleta_1">Adriano Lopes </a> <div class="atleta_perfil" id="atleta_perfil_1">Dados do perfil...</div> <a href="#" class="atleta" id="atleta_2">José </a> <div class="atleta_perfil" id="atleta_perfil_2">Dados do perfil...</div> <a href="#" class="atleta" id="atleta_3">Maria </a> <div class="atleta_perfil" id="atleta_perfil_3">Dados do perfil...</div> É mais ou menos isso, não testei eu fiz de cabeça, mas a lógica é essa. Compartilhar este post Link para o post Compartilhar em outros sites
