Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations Mike Lewis on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

Improving a FAQ page display

Status
Not open for further replies.
ljwmis

ljwmis

MIS
May 23, 2001
48
GB
I have a FAQ web page set up in the seemingly normal way, i.e. a list of questions at the top <a href="#Q1"> with a link to the answer <a name="Q1"> and a "back to top" link anchored to the top of the page.

This is great when jumping from question to question. However, when you scroll down through the FAQs page it looks messy with 'questions' and 'back to top' one after the other.

Is there anything which would allow only the answer to be displayed by itslef and then closed, e.g. I have tried <target='_blank'> linked to the question <a href="#Q1"> but it displays the whole page again in a new window. I could then at least remove the 'back to top' inserts.

Any ideas??
 
Sort by date Sort by votes
you could use a javascript show/hide layer solution there lots of threads in the javascript forum forum216. or a server side solution is possible to display the related answer from a querystring parameter, the details will depend on what code your host supports.




Chris.

Indifference will be the downfall of mankind, but who cares?
 
Upvote 0 Downvote
You can use JavaScript to show and hide divs. Here is a code sample. It is just HTML and Javascript so just copy and paste it in to your favorite editor and give her a go.

Code: 
<html>
<head>
<title>Frequently Asked Questions</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script language="JavaScript" type="text/javascript">
function toggleDiv(divName) 
{
  thisDiv = document.getElementById(divName);
  if (thisDiv) 
  {
    if (thisDiv.style.display == "none")
    {
      thisDiv.style.display = "block";
    }
    else
    {
      thisDiv.style.display = "none";
    }
  }
  else
  {
    alert("Error: Could not locate div with id: " + divName);
  }
}
</script>
</head>
<body>
Click on a question to see its answer.  Click on the question again to hide the answer.
<br />
<hr />
<h3><a href="javascript: toggleDiv('Q1');"  style="text-decoration: none; ">Q1. Why is the sky blue?</a></h3>
  <div id="Q1" class="dataStyle" style="display: none;">
    <p>Light is made up of electromagnetic waves. 

The distance between 2 crests in this wave is called the wavelength. 

White light contains all the colors of the rainbow. 

The amount of light scattered for any given colour depends on the wavelength of that colour. 

All the colors in white light have different wavelengths. 

Red light has the longest wavelength. 

The wavelength of blue light is about half that of red light. 

This difference in wavelength causes blue light to be scattered nearly ten times more than red light. Lord Rayleigh studied this phenomena in detail. It is caused the Tyndall effect or Rayleigh scattering. 

Lord Rayleigh also calculated that even without smoke and dust in the atmosphere, the oxygen and nitrogen molecules would still cause the sky to appear blue because of scattering. 

When blue light waves try to go straight through an oxygen and nitrogen molecules, its light is scattered in all directions because of this collision. 

This scattered blue light is what makes the sky blue. 

All other colors (with longer wavelengths than blue light) are scattered too. 

Blue light's short wavelength causes it to be scattered the most. 

(The shorther the wavelength of the color, the more that color gets scattered by the atmosphere) 

Actually, violet has the shortest wavelength of all colors. Violet is scattered even more than blue light. However, our eyes are much more sensitive to see blue than violet, therefore we see the sky as blue. 

Very little visible light is absorbed by the atmosphere. 

Blue sky: summary
Blue light's short wavelength causes it to get scattered around 10 times more by oxygen and nitrogen molecules than the longer wavelengths (like red) of the other colors visible to us. 

The blue in the sky we see is scattered blue light
</p>
  </div>
<h3><a href="javascript: toggleDiv('Q2');" style="text-decoration: none; ">Q2. Why is the ocean blue?</a></h3>
  <div id="Q2" class="dataStyle" style="display: none;">
    <p>Unfortunately, the simple explanation is made a bit more complex by whether you live in the United States or in the United Kingdom ;-) 
If you live in the United States: 

The ocean is blue because pure, clear water has a VERY light blue color. 

If you live in the United Kingdom: 

The ocean is blue because pure, clear water has a VERY light blue colour. 

If you live anywhere else, you unfortunately have to decide for yourself which of these 2 explanations are correct ;-) 

On a cloudy day when the sky appears grey, the ocean appears gray too (it reflects the sky). 

High concentrations of plankton make the ocean appear blue-green.
</p>
  </div>
<h3><a href="javascript: toggleDiv('Q3');" style="text-decoration: none; ">Q3. Why are clouds white?</a></h3>
  <div id="Q3" class="hiddenStyle" style="display: none;">
    <p>
		Water and ice in clouds scatter all color wavelengths by the same amount. All colors are represented in this scattered light and clouds therefore appears white. (White light is made up of all colors, red, blue, violet, etc.) 
		(All wavelengths of light get scattered equally by drops of water and small clumps of ice.) 
	</p>
  </div>
</body>
</html>

Sorry it is not formatted pretty. Hope it helps.
 
Upvote 0 Downvote
I suggest you make all <div>s visible by default, then run a JS script onload which hides them all, then use Guru7777's approach to show them when clicked.

That way, somebody with JS switched off will see the full list, people with it switched on (ie most people) will see it one-by-one.

-- Chris Hunt
 
Upvote 0 Downvote
That's a good tip, ChrisHunt.

Something I know I need to give more consideration to is people who might be surfing with JavaScript off or images off. I am usually very good about screen resolution and browser cross-compatability, but forget about those things. Thanks.

 
Upvote 0 Downvote
Guru7777 your script had the desired effect and my FAQs page (25 questions and growing) is now much neater and easier to view - many thanks.

Chris - you make a good point but I am unsure how to implement your suggestions. Can you clarify 'visible by default' and the 'JS script onload', I am newish to JS.

Cheers.
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

ControlNovice
  • Locked
  • Question
Any plans to add AppSheet programming to this list?
Replies
0
Views
197
ControlNovice
ControlNovice
Digital Dose
  • Locked
  • Question
My website refreshes twice when it is opened on any browser. 1
Replies
3
Views
281
sartechy
sartechy
chris900
  • Locked
  • Question
suggest a Magento development company
Replies
0
Views
169
chris900
chris900
bogdangromov
  • Locked
  • Question
Free-royalty music for a vlog
Replies
0
Views
229
bogdangromov
bogdangromov
JScannell
  • Locked
  • Question
Accessing a localhost website from other devices
Replies
4
Views
282
JScannell
JScannell

Part and Inventory Search

Sponsor

Back
Top