Ir para conteúdo
Fórum Script Brasil
  • 0

Script Para Exibir <div> Oculta


juliano.ma

Pergunta

Bom dia pessoal,

estou colocando em um determinado site uma página de piadas e estou procurando um script que faça o seguinte:

1 - Opção para colocar o título e inserir o texto.

2 - Enviar para o banco de dados.

3 - Na página que o visitante vai acessar aparece a lista com os títulos das piadas.

4 - Quando o visitante clikar em um link de algum título o texto será expandido logo abaixo.

5 - Caso o visitante clikar em outro, o texto anterior recolhe automático.

Seria um espécie de fórum?

Gostaria de umas dicas de qual script usar ou mesmo para construir um do zero!

Abraços!!

Pessoal, a parte de cadastro e envio das piadas para o banco de dados eu já fiz, o que eu não sei fazer é ocultar o texto e presentar somente quando der o click.

Bom gente,

a parte de enviar, editar e excluir está pronta. Só falta agora fazer com que os títulos seja links e quando clickar sobre eles o texto expandir para baixo.

meu código:

<?php
$conexao = mysql_connect("localhost","user","senha");
$db = mysql_select_db("banco");
$sql = "SELECT * FROM piadas ORDER BY id ASC";
$resultado = mysql_query($sql)
or die ("Não foi possível realizar a consulta ao banco de dados");
while ($linha=mysql_fetch_array($resultado)) {
$id = $linha["id"];
$titulo = $linha["titulo"];
$texto = $linha["texto"];
echo "$id";
echo "<br>";
echo "Título: $titulo";
echo "<br>";
echo "Ler: $texto";
echo "<br>";
echo "<hr>";
}
?>

Editado por juliano.ma
Link para o comentário
Compartilhar em outros sites

5 respostass a esta questão

Posts Recomendados

  • 0

Você dee colocar o texto dentro de uma div oculta e usar o id da piada numa função JavaScript que oculte ou mostre essa div.

Um exemplo simples (não tenho tempo de testar, mas creio que funcionará bem):

function Piada(id)
{
    div = document.getElementById("piada"+id);
    if (div.display == "none")
        div.style.display = "block";
    else
        div.style..display = "none";
}
Na hora de criar o laço, faça algo mais ou menos assim:
while ($linha=mysql_fetch_array($resultado)) {
$id = $linha["id"];
$titulo = $linha["titulo"];
$texto = $linha["texto"];
echo "$id";
echo "<br>";
echo "<span onclick=\"Piada($id)\">Título: $titulo</span>";
echo "<br>";
echo "
<div id=\"piada". $id . "\" style=\"display:none;\">
Ler: $texto";
</div>
echo "<br>";
echo "<hr>";
}

Se tiver problemas, dê uma pesquisada no fórum de JS por "display", que você encontrará muitos tópicos sobre isso.

Abraços,

beraldo

Link para o comentário
Compartilhar em outros sites

  • 0

Obrigado Beraldo por ter respondido!

Olá amigos.

Desculpe se estou insistindo nesse post, mas ainda não consegui fazer funcionar minha div oculta.

Eu postei no fórum de javascript e esperei alguns dias, mas ninguém soube me ajudar.

o que eu preciso está nesse site aqui olhem:

site com exemplo de div oculta

Reparem na lista de itens e cliquem em um dos itens.

O que eu consegui extrair do código deles foi isto:

<style type="text/css">
.cell2 {
    BORDER-RIGHT: #c0c0c0 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #c0c0c0 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; BORDER-LEFT: #c0c0c0 1px solid; COLOR: #333333; PADDING-TOP: 4px; BORDER-BOTTOM: #c0c0c0 1px solid; FONT-FAMILY: Arial; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #e8ecef
}
.tRow {
    BORDER-RIGHT: #f48624 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #f48624 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; BORDER-LEFT: #f48624 1px solid; COLOR: #333333; PADDING-TOP: 4px; BORDER-BOTTOM: #f48624 1px solid; FONT-FAMILY: Arial; BACKGROUND-COLOR: #ffe1c8
}
TABLE.view {
    BORDER-RIGHT: #8fb3e4 1px solid; BORDER-TOP: #8fb3e4 1px solid; BORDER-LEFT: #8fb3e4 1px solid; WIDTH: 100%; BORDER-BOTTOM: #8fb3e4 1px solid
}
TABLE.view TD.detailed {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
TABLE.view TR.detailed {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
TABLE.view TR.detailedHidden {
    PADDING-RIGHT: 0px; DISPLAY: none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
TABLE.view TR TD.detailed TABLE.detailed {
    BACKGROUND: white; WIDTH: 100%
}
TABLE.view TR TD.detailed TABLE.detailed TD.left {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: middle; WIDTH: 120px; PADDING-TOP: 0px; TEXT-ALIGN: center
}
TABLE.view TR TD.detailed TABLE.detailed TD.right {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: top; PADDING-TOP: 0px
}
TABLE.view TR TD.detailed TABLE.detailed TD.right TR TD.left {
    BORDER-RIGHT: #bbbbbb 1px solid; WIDTH: 33%; BORDER-BOTTOM: #bbbbbb 1px solid; TEXT-ALIGN: left
}
TABLE.view TR TD.detailed TABLE.detailed TD.right TR TD.right {
    BORDER-LEFT: #bbbbbb 1px solid; WIDTH: 33%; BORDER-BOTTOM: #bbbbbb 1px solid; TEXT-ALIGN: left
}
TABLE.view TR TD.detailed TABLE.detailed TD.right TR TD.desc {
    BORDER-TOP: #bbbbbb 1px solid; WIDTH: 100%; TEXT-ALIGN: left
}
</style>

<script language="JavaScript" type="text/JavaScript">
function expand(id) {
    f = document.getElementById("info"+id);
    attr = (document.all ? "className": "class" );
    h = "detailedHidden";
    v = "detailed";
    f.setAttribute(attr, f.getAttribute(attr) == h ? v: h)
}
</script>

<p>

<?php
$conexao = mysql_connect("localhost","aaa","aaa");
$db = mysql_select_db("galeria_fotos");
$sql = "SELECT * FROM piadas ORDER BY id ASC";
$resultado = mysql_query($sql)
or die ("Não foi possível realizar a consulta ao banco de dados");
while ($linha=mysql_fetch_array($resultado)) {
$id = $linha["id"];
$titulo = $linha["titulo"];
$texto = $linha["texto"];
?>

<div align="center">
<table align="center" class=view style="WIDTH: 580">
<tbody>
<tr class=cell2 onMouseOver="this.className='tRow'"
onMouseOut="this.className='cell2'">
<td style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: middle; PADDING-TOP: 0px; TEXT-ALIGN: center">
<div align="left"> <? echo "$id"; ?> - <a href="java script:expand('id');"><? echo "$titulo"; ?></a></div></td>
<tr class=detailedHidden id=infoid>
<td colspan=11 class=detailed> <table class=detailed>
<tbody>
<tr>
<td><? echo "$texto"; ?></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>

<?
}
?>

</div>
<div align="center">
</div>

Do jeito que está ele ainda não faz o loop dos textos, apenas faz dos títulos.

Alguém tem alguma ideia do possa ser?

Abraços!

Editado por juliano.ma
Link para o comentário
Compartilhar em outros sites

  • 0

Procur no ajax,

O Dreamweaver CS3 tem uns exeplos de Spry como Accordion que é uma "tabela drop-down" tipo tem os tituloas ai você click num ele desçe você click no outro ele desce e fecha os outros

baxa o dreamweaver CS3 ele é gratis por 30 dias

procura no sitte da adobe o CS3

ADOBE

vih o site http://www.alexandreerbs.com/inutiltexto.php

e é ezatamente isso que ele uza AJAX

a kestão do site ser .php acho que é porque o resto do site também é porque isso não tem nada a ver com php e sim com AJAX--> XML+Javascript+CSS

Link para o comentário
Compartilhar em outros sites

  • 0

Obrigado por ter respondido,

esse site que eu citei acima sou eu mesmo que estou desenvolvendo para um amigo meu. Já aprendi como fazer, por isso você viu a div oculta funcionando.

Veja como ficou o código:

<style type="text/css">
.cell2 {
    BORDER-RIGHT: #c0c0c0 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #c0c0c0 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; BORDER-LEFT: #c0c0c0 1px solid; COLOR: #333333; PADDING-TOP: 4px; BORDER-BOTTOM: #c0c0c0 1px solid; FONT-FAMILY: Arial; BORDER-COLLAPSE: collapse; BACKGROUND-COLOR: #e8ecef
}
.tRow {
    BORDER-RIGHT: #f48624 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #f48624 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; BORDER-LEFT: #f48624 1px solid; COLOR: #333333; PADDING-TOP: 4px; BORDER-BOTTOM: #f48624 1px solid; FONT-FAMILY: Arial; BACKGROUND-COLOR: #ffe1c8
}
TABLE.view {
    BORDER-RIGHT: #8fb3e4 1px solid; BORDER-TOP: #8fb3e4 1px solid; BORDER-LEFT: #8fb3e4 1px solid; WIDTH: 100%; BORDER-BOTTOM: #8fb3e4 1px solid
}
TABLE.view TD.detailed {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
TABLE.view TR.detailed {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
TABLE.view TR.detailedHidden {
    PADDING-RIGHT: 0px; DISPLAY: none; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; PADDING-TOP: 0px
}
TABLE.view TR TD.detailed TABLE.detailed {
    BACKGROUND: white; WIDTH: 100%
}
TABLE.view TR TD.detailed TABLE.detailed TD.left {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: middle; WIDTH: 120px; PADDING-TOP: 0px; TEXT-ALIGN: center
}
TABLE.view TR TD.detailed TABLE.detailed TD.right {
    PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; MARGIN: 0px; VERTICAL-ALIGN: top; PADDING-TOP: 0px
}
TABLE.view TR TD.detailed TABLE.detailed TD.right TR TD.left {
    BORDER-RIGHT: #bbbbbb 1px solid; WIDTH: 33%; BORDER-BOTTOM: #bbbbbb 1px solid; TEXT-ALIGN: left
}
TABLE.view TR TD.detailed TABLE.detailed TD.right TR TD.right {
    BORDER-LEFT: #bbbbbb 1px solid; WIDTH: 33%; BORDER-BOTTOM: #bbbbbb 1px solid; TEXT-ALIGN: left
}
TABLE.view TR TD.detailed TABLE`?l???n??<style type="text/css">
.cell2 {
    BORDER-RIGHT: #c0c0c0 1px solid; PADDING-RIGHT: 4px; BORDER-TOP: #c0c0c0 1px solid; PADDING-LEFT: 4px; FONT-SIZE: 12px; PADDING-BOTTOM: 4px; BORDER-LEFT: #c0c0c0 1px solid; COLOR: #333333; PADDING-TOP: 4px; BORDER-BOTTOM: #c0c0c0 1px solid; FONT-FAMILY: Arial; BORDER-COLLAPSE: collapse; BA.detailed TD.right TR TD.desc {
    BORDER-TOP: #bbbbbb 1px solid; WIDTH: 100%; TEXT-ALIGN: left
}
</style>
                    <script language="JavaScript" type="text/JavaScript">
function expand(id) {
    f = document.getElementById("info"+id);
    attr = (document.all ? "className": "class" );
    h = "detailedHidden";
    v = "detailed";
    f.setAttribute(attr, f.getAttribute(attr) == h ? v: h)
}
</script>
                  </p>
                  <p>&nbsp;</p>
                  <p><strong>Piadas, dicas e muito mais!</strong> </p>
                </div>
                <p>

<?php
include("conecta.php");
$sql = "SELECT * FROM piadas ORDER BY id ASC";
$resultado = mysql_query($sql)
or die ("Não foi possível realizar a consulta ao banco de dados");



while ($linha=mysql_fetch_array($resultado)) {
$id = $linha["id"];
$titulo = $linha["titulo"];
$texto = $linha["texto"];
$i + 1;
?>
<div align="center">
<table align="center" class=view style="WIDTH: 580">
<tbody>
<tr class=cell2 onMouseOver="this.className='tRow'"
onMouseOut="this.className='cell2'">
<td style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; VERTICAL-ALIGN: middle; PADDING-TOP: 0px; TEXT-ALIGN: center">
<div align="left"> <? echo ++$i; ?> - <a href="java script:expand(<?php echo $id;?>);"><b><? echo "$titulo"; ?></b></a></div></td>
<tr class="detailedHidden" id="info<?php echo $id;?>">
<td colspan=11 class=detailed> <table class=detailed>
<tbody>
<tr>
<td><? echo "$texto"; ?></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>

                  <?
}
?>

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,1k
×
×
  • Criar Novo...