Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
É 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;
} 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>
<?phpif(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 kwhile($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>';
?>Carregando comentários...