ShermerNT Posted October 10, 2007 Share Posted October 10, 2007 Hey all! Ok so I have a page that uses AJAX to expand and collapse content. What I am trying to do is When I click on a link on a page with an anchor, I want the link to go to the page that uses the AJAX and have the content already expanded when that link is clicked For example. Page #1. I click on "How do I benefit" which im gonna have an anchor on this link to go to the other page. when this link is clicked the other page comes up with the content under this section expanded. Can you please help me? Thanks everyone! Quote Link to comment Share on other sites More sharing options...
bobleny Posted October 10, 2007 Share Posted October 10, 2007 If you don't mind, let me ask you a few questions. Help us help you... 1.) Are you familiar with JavaScript? 2.) Are you familiar with PHP? 3.) How much are you willing to learn to do this? 4.) Are you looking to learn the basics of AJAX? Quote Link to comment Share on other sites More sharing options...
ShermerNT Posted October 11, 2007 Author Share Posted October 11, 2007 I am familiar with Javascript. I am familiar with PHP, and I know a little bit about AJAX, not much but I know some. Im just starting to use this. I am willing to learn anything. Quote Link to comment Share on other sites More sharing options...
bobleny Posted October 11, 2007 Share Posted October 11, 2007 Great answer! Here is a basic little JavaScript I whipped up for you: <html> <head> <script language="JavaScript" type="text/javascript"> <!-- function BoxOpen() { document.getElementById("box_top").innerHTML = "<a href=javascript:BoxClose()>Close Box</a>"; document.getElementById("box_main").innerHTML = "<p>This is the main subject of this box.</p><p>Stuff is displayed in this box.</p><p>This is just filler text.</p><p>Filler text: text used to fill an area</p>"; } function BoxClose() { document.getElementById("box_top").innerHTML = "<a href=javascript:BoxOpen()>Open Box</a>"; document.getElementById("box_main").innerHTML = " "; } --> </script> <title>Colapsable Boxes</title> </head> <body> <div id='box_top'><a href=javascript:BoxClose()>Close Box</a></div> <div id='box_main'><p>This is the main subject of this box.</p><p>Stuff is displayed in this box.</p><p>This is just filler text.</p><p>Filler text: text used to fill an area</p></div> </body> </html> Your going to want to mirror the text that you have written in the function, BoxOpen(). The reason for this, is so that if a user doesn't have a browser capable of JavaScript, or if they have it turned off, they can still view whats in the box, they just won't be able to collapse it. If you don't want your users to view whats inside you could use this: <html> <head> <script language="JavaScript" type="text/javascript"> <!-- function BoxOpen() { document.getElementById("box_top").innerHTML = "<a href=javascript:BoxClose()>Close Box</a>"; document.getElementById("box_main").innerHTML = "<p>This is the main subject of this box.</p><p>Stuff is displayed in this box.</p><p>This is just filler text.</p><p>Filler text: text used to fill an area</p>"; } function BoxClose() { document.getElementById("box_top").innerHTML = "<a href=javascript:BoxOpen()>Open Box</a>"; document.getElementById("box_main").innerHTML = " "; } --> </script> <title>Colapsable Boxes</title> </head> <body onload="BoxOpen()"> <div id='box_top'></div> <div id='box_main'></div> </body> </html> With that option, you need to call on the function BoxOpen(). I used the onload method in the <body> tag. Now your users wont be able to see the box unless JavaScript is enabled. The third option is my favorite! <html> <head> <script language="JavaScript" type="text/javascript"> <!-- function BoxOpen() { document.getElementById("box_top").innerHTML = "<a href=javascript:BoxClose()>Close Box</a>"; document.getElementById("box_main").innerHTML = "<p>This is the main subject of this box.</p><p>Stuff is displayed in this box.</p><p>This is just filler text.</p><p>Filler text: text used to fill an area</p>"; } function BoxClose() { document.getElementById("box_top").innerHTML = "<a href=javascript:BoxOpen()>Open Box</a>"; document.getElementById("box_main").innerHTML = " "; } --> </script> <title>Colapsable Boxes</title> </head> <body onload="BoxOpen()"> <div id='box_top'><a href="index.php?close=yes">Close Box</a></div> <div id='box_main'><p>This is the main subject of this box.</p><p>Stuff is displayed in this box.</p><p>This is just filler text.</p><p>Filler text: text used to fill an area</p></div> </body> </html> This is a mixture of the two. If the user doesn't have JavaScript enabled, they are presented a PHP link instead. This way they can still colaps the box, but the page will have to reload. Alternatively, instead of a PHP link for colapsing the box, you could display a message that says, hey Turn on JavaScript or get a new browser. Then throw them a link for Firefox. Depending on what you are looking for one of those options should work great for you! Heck, that might be all you wanted to do with your boxes. If this isn't what you want, or you have other questions, please ask! Good luck! www.w3schools.com/ajax <-- Excellent starters guide for AJAX Oh, I didn't add any AJAX to the scripts, because I'm not sure what you are looking to do.... I don't know if you wanted to use the boxes with a game like thing where the info in the box is updated or if you where looking to just colaps some boxes..... Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.