bernie.nmsu Posted March 11, 2005 Share Posted March 11, 2005 I'm creating a FAQ's page. The layout that I want to use is to list the questions and allow the user to select the question and display the FAQ right under the question. If the user selects the question again, the answer gets hidden. Does someone know how to code this functionality. I'm still learning. Thanks. Quote Link to comment Share on other sites More sharing options...
Shaun Posted March 11, 2005 Share Posted March 11, 2005 I'm creating a FAQ's page. The layout that I want to use is to list the questions and allow the user to select the question and display the FAQ right under the question. If the user selects the question again, the answer gets hidden. Does someone know how to code this functionality. I'm still learning. Thanks. 213033[/snapback] this would be javascript.. look it up on google. Quote Link to comment Share on other sites More sharing options...
bernie.nmsu Posted March 11, 2005 Author Share Posted March 11, 2005 I haven't found anything. I've never used Javascript. Is there a specific function that I need to use? Quote Link to comment Share on other sites More sharing options...
Shaun Posted March 11, 2005 Share Posted March 11, 2005 I haven't found anything. I've never used Javascript. Is there a specific function that I need to use? 213074[/snapback] yes there would be... maybe post something in the javascript forum. Quote Link to comment Share on other sites More sharing options...
bernie.nmsu Posted March 11, 2005 Author Share Posted March 11, 2005 Looks like I found something. This seems to work for me. <html> <head> <title>Untitled</title> <script language="JavaScript"> function showAndHide(theId) { var el = document.getElementById(theId); var link = document.getElementById("moreLink"); if (el.style.display=="none") { el.style.display="block"; //show element link.innerHTML = "Hide Links..."; } else { el.style.display="none"; //hide element link.innerHTML = "More..."; } return false; } </script> </head> <body> <p><a id="moreLink1" href="#" onClick="return showAndHide('QUESTION1')">FAQ #1</a></p> <div id='QUESTION1' style="display:none"> ANSWER 1<br> ANSWER 1A</a><br> ANSWER 1B</a><br> </div> </body> </html> Thanks for the help. Quote Link to comment Share on other sites More sharing options...
Shaun Posted March 11, 2005 Share Posted March 11, 2005 Looks like I found something. This seems to work for me.<html> <head> <title>Untitled</title> <script language="JavaScript"> function showAndHide(theId) { var el = document.getElementById(theId); var link = document.getElementById("moreLink"); if (el.style.display=="none") { el.style.display="block"; //show element link.innerHTML = "Hide Links..."; } else { el.style.display="none"; //hide element link.innerHTML = "More..."; } return false; } </script> </head> <body> <p><a id="moreLink1" href="#" onClick="return showAndHide('QUESTION1')">FAQ #1</a></p> <div id='QUESTION1' style="display:none"> ANSWER 1<br> ANSWER 1A</a><br> ANSWER 1B</a><br> </div> </body> </html> Thanks for the help. 213087[/snapback] *SOLVED* Sweet, ill be using that too Quote Link to comment Share on other sites More sharing options...
phpfreakjav Posted December 18, 2008 Share Posted December 18, 2008 It can be done with php <?php function start_section( $id, $title ) { ?> <div> <a href="javascript: void twist('<?php echo($id); ?>');"><img style="border:none;" alt="click here to open menu" "src="images/up.jpg" id="img_<?php echo($id); ?>"/></a> <h3><?php echo( $title ); ?></h3> <div style="visibility:hidden;position:absolute;" id="<?php echo($id); ?>" class="spin-content"> <?php } function end_section( ) { ?> </div></div> <?php } function spinner_header( ) { ?> <style type="text/css"> h3 {border-bottom: 1px solid black;display:inline; } .spin-content{font-size:small;padding:10px 0 10px 30px;} </style> <script language="Javascript"> function twist( sid ) { imgobj = document.getElementById( "img_"+sid ); divobj = document.getElementById( sid ); if ( imgobj.src.match( "images/up.jpg" ) ) { imgobj.src = "images/down.jpg"; divobj.style.position = "relative"; divobj.style.visibility = "visible"; } else { imgobj.src = "images/up.jpg"; divobj.style.visibility = "hidden"; divobj.style.position = "absolute"; } } </script> <?php } ?> in the page that u want to use the function. <?php start_section( "one", "Equipment Checkout" ) ?> <ul> <li><a target="_blank" href="http://www.cslaee.com/pdf/forms/210_locker_checkout.pdf">EE-210</a></li> <li><a target="_blank" href="http://www.cslaee.com/pdf/forms/211_%20locker_checkout.pdf">EE-211</a></li> <li><a target="_blank" href="http://www.cslaee.com/pdf/forms/317_locker_%20checkout.pdf">EE-317</a></li> <li><a target="_blank" href="http://www.cslaee.com/pdf/forms/340_%20locker_checkout.pdf">EE-340</a></li> <li><a target="_blank" href="http://www.cslaee.com/pdf/forms/346_locker_checkout.pdf">EE-346</a></li> <li><a target="_blank" href="http://www.cslaee.com/srd.html">EE-496</a></li> <li><a target="_blank" href="http://www.cslaee.com/pdf/forms/fpga.pdf">FPGA Board</a></li> <li><a target="_blank" href="http://www.cslaee.com/cardkey.html">Card Key Access</a></li> </ul> <?php end_section( ) ?> 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.