Jump to content

Archived

This topic is now archived and is closed to further replies.

bernie.nmsu

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.

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
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.

Share this post


Link to post
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 :)

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

×

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.