AJAX Toggle expand content in div

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;
 
    });
 
});

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:

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();
    }

                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:
15:
16:
17:
18:
19:
20:
21:
22:
23:
24:
25:
26:
27:
28:
29:
30:
31:
32:
33:
34:
35:

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;
                    });
                  
                
           });
                                              

1:
2:
3:
4:
5:
6:
7:
8:
9:
10:
11:
12:
13:
14:

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
%>