Jump to content


Photo

Creating a FAQ's page


  • Please log in to reply
6 replies to this topic

#1 bernie.nmsu

bernie.nmsu
  • Members
  • PipPip
  • Member
  • 22 posts

Posted 11 March 2005 - 06:45 PM

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.

#2 Shaun

Shaun
  • Members
  • PipPipPip
  • Advanced Member
  • 63 posts
  • LocationMidlands

Posted 11 March 2005 - 07:26 PM

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.

View Post

this would be javascript.. look it up on google.


#3 bernie.nmsu

bernie.nmsu
  • Members
  • PipPip
  • Member
  • 22 posts

Posted 11 March 2005 - 08:43 PM

I haven't found anything. I've never used Javascript. Is there a specific function that I need to use?

#4 Shaun

Shaun
  • Members
  • PipPipPip
  • Advanced Member
  • 63 posts
  • LocationMidlands

Posted 11 March 2005 - 08:45 PM

I haven't found anything.  I've never used Javascript.  Is there a specific function that I need to use?

View Post

yes there would be... maybe post something in the javascript forum.


#5 bernie.nmsu

bernie.nmsu
  • Members
  • PipPip
  • Member
  • 22 posts

Posted 11 March 2005 - 09:42 PM

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.

#6 Shaun

Shaun
  • Members
  • PipPipPip
  • Advanced Member
  • 63 posts
  • LocationMidlands

Posted 11 March 2005 - 09:54 PM

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.

View Post

*SOLVED*
Sweet, ill be using that too :)



#7 phpfreakjav

phpfreakjav
  • Members
  • PipPipPip
  • Advanced Member
  • 41 posts

Posted 18 December 2008 - 02:17 PM

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( ) ?>





0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users