Ir para conteúdo

POWERED BY:

Arquivado

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

Célio A.

Exibir e ocultar conteudo

Por , em PHP

Recommended Posts

Célio A.    4

Célio A.
Postado

É 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

adriano.lopes
Postado

É 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
Ir para a lista de tópicos PHP
×

Informação importante

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

  Aceito