Jump to content

Creating a FAQ's page


Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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 :)

 

Link to comment
Share on other sites

  • 3 years later...

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

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.