ajuda com javascript e ajax

[Marcelo0906]

E ai galera bom eu sou iniciante em programação e muito iniciante em java script e ajax heheheh bom eu estou precisando fazer alguma coisa como esse exemplo mas não sei nem por onde começar o que preciso fazer não é a parte de buscar a cidade atraves do estado masi sim dpois q ele lista os postos.. quando ao clicar ele abre uma "DIV" alguma coisa assim e esconde se cliclar denovo...

se alguém tiver um exemplo ou um tutorial sobre isso agaredeço!

[.Andreia.]

uma sugestao é quando você ver um script e quiser algo parecido, de uma olhada no codigo fonte pra ter a ideia de como foi feito.

bom, um script parecido:

<script>
function ExpandeDiv()
{
    if (document.getElementById("div1").style.display == 'none')
    {
        document.getElementById("div1").style.display = 'block';
        document.getElementById("imagem").src = "menos.gif";
    }
    else
    {
        document.getElementById("div1").style.display = 'none';
        document.getElementById("imagem").src = "mais.gif";
    }
}
</script>


<table border="1" width="200" cellspacing="0" cellpadding="0">
    <tr bgcolor="#0E7D92">
        <td width="50%">&nbsp;<font color="white" face="verdana" size="2">Título da Div</font></td>
        <td width="50%" align="right"><a href="java script:;" onclick="ExpandeDiv()"><img id="imagem" src="menos.gif" border="0"></a></td>
    </tr>
    <tr>
        <td colspan="2"><div id="div1" style="display:block">Aqui vem as informações que devem ser exibidas na Div</div></td>
    </tr>
</table>

no caso do codigo do site, ele usou uma div dentro de cada quadrado

[Marcelo0906]

bom valeu Andreia... mas assim na verdade eu até consegui expandir a div e tal o problema é o seguinte c eu to gerando os campos automaticamente de acordo com os registros encontrados mas a div com aquela funcao ele não gerar na verdade ele gera só uma... ele só abre e fecha a mesma div... deve ser por causa do id mas não sei como mudar isso.. como disse sou iniciante...

[.Andreia.]

O que eu mandei foi um exemplo, você tem que adaptar. Se você está recebendo os dados pelo banco então jogue algum contador ou um ID (do select do banco) para q seja o ID nesse exemplo.

Exemplo, usando ASP:

<script>
function Div(divId)
{
var div = "dv" + divId;
var img = "seta" + divId;

    if (document.getElementById(div).style.display == "none")
    {
        document.getElementById(div).style.display = "block";
        document.getElementById(img).src = "seta_baixo.gif";
    }
    else
    {
        document.getElementById(div).style.display = "none";
        document.getElementById(img).src = "seta_cima.gif";
    }
}
</script>

<style>
.titulo {
    border: 1px dashed #000000;
    background-color:#CCCCCC;
    margin: 2px;
    padding: 3px;
    width:100px;
    cursor: pointer;
    font-family: verdana;
    font-size: 10px;
    }
</style>

<% while not tab.eof %>
<div class="titulo" onclick="Div('<%= tab("id") %>')"><img src="seta_cima.gif" name="seta<%= tab("id") %>"> Título 1
<div id="dv<%= tab("id") %>" style="display:'none'"><br>dados</div></div>
<% tab.movenext
wend
%>