AJAX Toggle expand content in div

I suggest you check out the YUI library. http://developer.yahoo.com/yui/
Their library is easy to use, has great documentation, and some good examples. Here is an example of how you could apply that effect using YUI. The $('details-button).onclick would capture the onclick event of your button, and in my example I call a aspx page, as that is the server side language I chose to get the detail information. You could replace that with a php file if that is your language of choice. when the result of the query comes back, the success handler function will then receive your info, and you can do what you like with it on the client side. In my example I simply embed the content in the innerHTML of one of the divs in my page. Hope this helps.

$('details-button').onclick = function() {
  
   
    YAHOO.util.Connect.asyncRequest(
            'POST',
            'QuestionMain.aspx?action=getDetailsInfo',
            {
                success: function (o) {
                   
                    var detailsInfo = o.responseText;
                    $('mainContent').innerHTML = detailslsInfo;
                      
                }
            }
   );
   
   }

Select allOpen in new window

I'm already using Jquery, so don't really want to use YUI.

How would I do this with Jquery?

Jquery - another great library: just as simple: Not tested but this should give you the idea:

Examples:
http://docs.jquery.com/Ajax
http://www.ibm.com/developerworks/library/x-ajaxjquery.html

$('details-button').click(function () { 
                  
    $.post('DetailsIno.aspx', 
 
        success: function (o) {
        var detailsInfo = o.responseText;
        $('mainContent').innerHTML = detailslsInfo;
 
    });
 
});

Select allOpen in new window

Thanks for that. This is what I've got:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$('detail').click(function () {
    $.post('lettings-detail.asp?id=<%=RS("propID")%>',
        success: function (o) {
        var detailsInfo = o.responseText;
        $('detail<%=RS("propID")%>').innerHTML = detailslsInfo;
    });
});
</script>

<a href="#" class="detail">view details</a>

<div id="detail<%=RS("propID")%>"></div>

Is this right? I'm currently getting an error - Line 13 - expected )

Also how would I do it so that it toggles on and off when the button is pressed?

Anybody??

Sorry for the delayed Response - I had to set some fires out at work. Anyway, I am assuming you are doing something with asp when you wrote <%=RS("propID")%>, but I am not sure what you are trying to do there?

However the attached code snipped worked for me. I tested it out and worked fine.

<script type="text/javascript" src="js/jquery.js"></script>
	
<script type="text/javascript">
	   $(document).ready(
		   function(){				
                    $.post("Confirm.aspx?command=GetDetails",{
 
                    },function(txt){
                       
                       var element =  $('detailsInfo');
                       element.innerHTML = txt;
                    });
                  
		
	   });
      
</script>
 
//aspx code
protected void Page_Load(object sender, EventArgs e)
    {
       string command = Request.QueryString["command"];
        if (command == "GetDetails") {
            getDetails();
        }
    }
 
    private void getDetails()
    {
        string html = "<h1>This is the details info</h1>";
        Response.Expires = -1;
        Response.ContentType = "text/plain";
        Response.Write(html);
        Response.End();
    }

Select allOpen in new window

I'm using classic ASP, the part were I refer to lettings-detail.asp?id=<%=RS("propID")%> is just a page that filters the content depending on the record.

I used <div id="detail<%=RS("propID")%>"></div> to get a unique div name each time.

I've tried your code and I'm still getting an error - Line 13 - expected )

Hmm.. For testing purposes remove the  <%=RS("propID")%> reference to see if that is causing the error.

<div id="detail"></div>

 $(document).ready(
                   var propID = document.getElementsByID('detail');
 
                   function(){                          
                    $.post("lettings-detail.asp?id=" + propID, {
 
                    },function(txt){
                       
                       var element =  $('detailsInfo');
                       element.innerHTML = txt;
                    });
                  
                
           });

Select allOpen in new window

Ok, so now I've got this:

<script type="text/javascript">
 $(document).ready(
         var propID = document.getElementsByID('detail');

         function(){                          
            $.post("lettings-detail.asp?id=" + propID, {

            },function(txt){
               
               var element =  $('detailsInfo');
               element.innerHTML = txt;
            });
        
      
});

</script>

But I'm still getting an error, now on line 10?

The link to expand the text is <a href="#" class="detail">view details</a> and the div is <div id="detailsInfo"></div>, is this right? Where does the ID from the DB get passed?

Ok, thanks, this is what I originally had:

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript">
$('detail').click(function () {
                 
    $.post('lettings-detail.asp?id=<%=RS("propID")%>',
 
        success: function (o) {
        var detailsInfo = o.responseText;
        $('detail<%=RS("propID")%>').innerHTML = detailslsInfo;
 
    });
 
});

</script>

<div id="rightcol">
      <h2>Lettings</h2>
      <p>
        <% if RS.eof then %>
</p>
      <p class="firstpara">Sorry there are no properties available that meet your search criteria.</p>
      <p>Please <a href="javascript:history.back(1)">try again</a></p>
      <% else %>
      <% while not RS.eof %>
      <% if RS("offline") = 0 then %>
      <div class="propbox">
        <% if (RS("image1").Value) = "no-image.jpg" then %>
        <a href="lettings-display.asp?id=<%=RS("propID")%>"><img src="prop-images/thumb.jpg" width="138" height="108" border="0" alt="<%=RS("address")%>" /></a>
        <% else %>
        <a href="lettings-display.asp?id=<%=RS("propID")%>"><img src="prop-images/<%=RS("image1")%>" alt="<%=RS("address")%>" width="138" height="108" border="0" /></a>
        <% end if %>
        <h3><%=RS("address")%></h3>
        <p><%=left (RS("description"),80)%>....</p>
        <ul>
          <li><%=RS("beds")%> Bedroom</li>
          <li><%= FormatCurrency((RS("rent")), 0, -2, -2, -2) %>&nbsp;<%=RS("payTitle")%></li>
          <li class="nopad"><a href="#" class="detail">view details</a></li>
        </ul>
        <div class="cleaner"></div>
            <div id="detail<%=RS("propID")%>"></div>
      </div>
      <% end if %>
      <%  
                  RS.movenext
                  wend
            %>
      <p><a href="lettings.asp"><< search again</a></p>
      <% end if %>
    </div>

My lettings-detail.asp page is as follows:

<%@LANGUAGE="VBSCRIPT" CODEPAGE="1252"%>
<!--#include file="Connections/maltings.asp" -->
<%
Dim RSresults__MMColParam
RSresults__MMColParam = "1"
If (Request.QueryString("id") <> "") Then
  RSresults__MMColParam = Request.QueryString("id")
End If
%>
<%
Dim RSresults
Dim RSresults_numRows

Set RSresults = Server.CreateObject("ADODB.Recordset")
RSresults.ActiveConnection = MM_maltings_STRING
RSresults.Source = "SELECT * FROM qrylettings WHERE propID = " + Replace(RSresults__MMColParam, "'", "''") + ""
RSresults.CursorType = 0
RSresults.CursorLocation = 2
RSresults.LockType = 1
RSresults.Open()

RSresults_numRows = 0
%>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Property Sales</title>
<link href="maltings.css" rel="stylesheet" type="text/css" media="all" />
</head>
<body>
      <h3><%=(RSresults.Fields.Item("address").Value)%></h3>
      <div id="propimg">
        <% if request.querystring("img") = "" then %>
        <p><img src="prop-images/<%=(RSresults.Fields.Item("image1").Value)%>" alt="<%=(RSresults.Fields.Item("address").Value)%>" width="264" /></p>
        <% else %>
        <p><img src="prop-images/<%=(RSresults.Fields.Item("image2").Value)%>" alt="<%=(RSresults.Fields.Item("address").Value)%>" width="264" /></p>
        <% end if %>
      </div>
      <div id="propdetails">
        <p><strong>Area: </strong><%=(RSresults.Fields.Item("regionName").Value)%> | <strong>Beds: </strong><%=(RSresults.Fields.Item("beds").Value)%></p>
        <p><strong>Property Type: </strong><%=(RSresults.Fields.Item("proptype").Value)%></p>
        <p><strong>Price:</strong> <%= FormatCurrency((RSresults.Fields.Item("rent").Value), 0, -2, -2, -2) %>&nbsp;<%=(RSresults.Fields.Item("payTitle").Value)%></p>
        <% if RSresults.Fields.Item("reference").Value <> "" then %>
        <p><strong>Property Reference: </strong>Property <%=(RSresults.Fields.Item("reference").Value)%></p>
        <% end if %>
        <% if RSresults.Fields.Item("image2").Value = "no-image.jpg" then %>
        <% else %>
        <% if request.querystring("img") = "" then %>
        <p><strong>Images:</strong> 1 | <a href="lettings-display.asp?id=<%=(RSresults.Fields.Item("propID").Value)%>&amp;img=<%=(RSresults.Fields.Item("image2").Value)%>" title="View Alternate Image">2</a></p>
        <% else %>
        <p><strong>Images:</strong> <a href="javascript:history.back(-1)" title="View Alternate Image">1</a> | 2</p>
        <% end if %>
        <% end if %>
        <% if request.querystring("img") = "" then %>
        <p><a href="mailto:info@mrc-property.co.uk?subject=MRC Property Request: <%=(RSresults.Fields.Item("address").Value)%>" class="request">Request Info</a> &nbsp;&nbsp;<a href="javascript:window.print()" class="print">Print Page</a></p>
        <% else %>
        <p><a href="mailto:info@mrc-property.co.uk?subject=MRC Property Request: <%=(RSresults.Fields.Item("address").Value)%>" class="request">Request Info</a> &nbsp;&nbsp;<a href="javascript:window.print()" class="print">Print Page</a></p>
        <% end if %>
      </div>
      <p>
        <% Response.Write Replace(RSresults.Fields.Item("description"), vbCrLf, "<br />")%>
      </p>
      <% if request.querystring("img") = "" then %>
      <p><a href="javascript:history.back(-1)"><< Back to Results</a></p>
      <% else %>
      <p><a href="javascript:history.go(-2)"><< Back to Results</a></p>
      <% end if %>
    </div>
</body>
</html>
<%
RSresults.Close()
Set RSresults = Nothing
%>

woooah.. First time looking at a classic asp page - geez its much different than asp.net he he. I can't even load this in my IDE so I won't be able to help out on that end.

Let me say that I don't believe your javascript is going to work. Reason is you are dynamically generating your id's on your asp page (d=<%=RS("propID")%), which doesn't work the same on the clientside. One think you could try is passing the propID that is clicked to javascript as a parameter.

$('detail').click(function (propID) {  


But this won't work..
    $.post('lettings-detail.asp?id=<%=RS("propID")%>',
    $('detail<%=RS("propID")%>').innerHTML = detailslsInfo;