Malpractice Posted April 15, 2009 Share Posted April 15, 2009 Hi all, a couple of questions for you all(I have tried to work this out and for the life of me, I have no idea how to do it)I am trying to create a FAQ page and I can't make it do what I want (with out using frames, which I don't want to)http://www.weekendbridge.com/faq.htmlI have div'd my page header, 3 colums and a footer, I want the FAQ inside the middle div of the 3 colums and this is what I want to createQuestionQuestionQuestionQuestionQuestionQuestionThen I want the answer, appear below the questions and then when you click on another question , the answer is displayed in the same place.I am looking for help in the right direction, or possibly even an example, I can use (as I am getting frustrated, the harder I look the further away I get to resolving it Link to comment Share on other sites More sharing options...
Ingolme Posted April 15, 2009 Share Posted April 15, 2009 You would want to use Javascript.You're making an incorrect use of the <h1> element there.What you would need is a list of links and a script that will associate each question to an answer and display it in a result container.Here's how it would be done:HTML: <div class="main"> <ul class="questions"> <li><a href="java script:void(0);" onclick="showAnswer(0)">Where is the Hotel and how do I find it? How do I book?</a></li> <li><a href="java script:void(0);" onclick="showAnswer(1)">How do I pay the deposit?</a></li> <li><a href="java script:void(0);" onclick="showAnswer(2)">How do I pay the Hotel?</a></li> <li><a href="java script:void(0);" onclick="showAnswer(3)">What do I do if I do not have a partner?</a></li> <li><a href="java script:void(0);" onclick="showAnswer(4)">How do I get there from the Railway Station?</a></li> <li><a href="java script:void(0);" onclick="showAnswer(5)">How do I get there from the Airport?</a></li> </ul> <div id="answer">The answer will be displayed here</div></div> CSS:(I'm using different elements to make your page semantically correct, and they require some styling to look the way you want them) ul.questions { padding: 0; list-style-type: none; border-bottom: 1px solid black; }#answer { font-size: 3em; font-weight: bold; } Javascript:(goes in the <head> of the document) <script type="text/javascript"> var answers = [ "Answer of question 1.", "Answer of question 2.", "Answer of question 3.", "Answer of question 4.", "Answer of question 5.", "Answer of question 6." ] function showAnswer(el) { document.getElementById("answer").innerHTML = answers[el]; }</script> Link to comment Share on other sites More sharing options...
Malpractice Posted April 15, 2009 Author Share Posted April 15, 2009 Thanks, most helpful Link to comment Share on other sites More sharing options...
Malpractice Posted April 15, 2009 Author Share Posted April 15, 2009 hi, seemes to work as I wanted, but I have one problem, (Sorry to be a pain)I see the answer come up as you have said BUT only for a second, then this error message comes next each time, Not FoundThe requested URL /java script:void(0); was not found on this server.Apache/2.2.3 (Fedora) Server at www.weekendbridge.com Port 80what am I doing wrong? thx Link to comment Share on other sites More sharing options...
jeffman Posted April 15, 2009 Share Posted April 15, 2009 Are you typing java script with the space? Our message board inserts that space for security reasons. You do not want the space. Your code should look like this:href="javascript:void(0);" Link to comment Share on other sites More sharing options...
Malpractice Posted April 15, 2009 Author Share Posted April 15, 2009 Thanks, I actually thought it was one word, but assumed I was wrong . I did not realise it did that, Thanks again, both of you Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.