Scotty Posted September 4, 2014 Share Posted September 4, 2014 (edited) I am trying to develop a page for FAQ's. Basically the user will click/mouse over a question and the answer will be displayed. On the attached screen shot, you can see the list of questions on the left for the user to select, The answer should appear where the ? image is. I have tried lots of ideas, but now I have run dry. The other option is to toggle the answer below the question, but I am unsure how to deal with this when i get to the bottom of the list. Many thanks in advance Screen.pdf Edited September 4, 2014 by Scotty Link to comment Share on other sites More sharing options...
dsonesuk Posted September 4, 2014 Share Posted September 4, 2014 (edited) Click is not possible without javascript/jquery being used, place question in top level li, and answer within its child ul li element. <!DOCTYPE html><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <meta name="viewport" id="viewport" content="target-densitydpi=high-dpi,initial-scale=1.0,user-scalable=no" /> <title>Document Title</title> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script> <script type="text/javascript"> </script> <style type="text/css"> #mouseover_container { width:960px; margin: 0 auto; min-height: 450px; position: relative; border: 2px solid blue; overflow: hidden;} #mouseover_container ul, mouseover_container li {margin:0; padding:0; text-indent:0; list-style-type: none;} #mouseover_container ul ul {width: 50%; display: none; left: 50%; height: 100%; position: absolute; top:0; color: #000;} #mouseover_container > ul > li {width:50%;} #mouseover_container ul ul li p {margin-right: 10px; margin-left: 10px;} #mouseover_container > ul > li:hover ul {display: block; color: #000;} /* added black text does help if you wish to see it :-) */ #mouseover_container > ul > li:hover {background-color: #C90; color: #fff;} </style> </head> <body> <div id="mouseover_container"> <ul> <li>Area 1 blah blah blah <ul> <li><p>Lorem ipsum dolor sit amet, ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt eu fugiat nulla pariatur. Quis nostrud exercitation lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p>Qui officia deserunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt sunt in culpa duis aute irure dolor. Cupidatat non proident, consectetur adipisicing elit, lorem ipsum dolor sit amet. Ullamco laboris nisi</p></li> </ul> </li> <li>Area 2 blah blah blah blah <ul> <li><p>In reprehenderit in voluptate ut labore et dolore magna aliqua. Cupidatat non proident, sed do eiusmod tempor incididunt consectetur adipisicing elit. Lorem ipsum dolor sit amet, ut enim ad minim veniam, eu fugiat nulla pariatur. Sunt in culpa qui officia deserunt in reprehenderit in voluptate.</p></li> </ul> </li> <li>Area 3 adipisicing elit, duis aute <ul> <li><p>Consectetur adipisicing elit, duis aute irure dolor ullamco laboris nisi. Cupidatat non proident, in reprehenderit in voluptate sunt in culpa. Sed do eiusmod tempor incididunt ut aliquip ex ea commodo consequat. Duis aute irure dolor cupidatat non proident, mollit anim id est laborum.</p></li> </ul> </li> <li>Area 4 Ut labore et dolore <ul> <li><p>Ut aliquip ex ea commodo consequat. Ut labore et dolore magna aliqua. Ut enim ad minim veniam, cupidatat non proident, quis nostrud exercitation. Sunt in culpa duis aute irure dolor.</p></li> </ul> </li> </ul> </div> </body></html> Edit: added color: #000; #mouseover_container > ul > li:hover ul {display: block; color: #000;} /* added black text does help if you wish to see it :-) */ Edited September 4, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
Scotty Posted September 4, 2014 Author Share Posted September 4, 2014 Sorry brain dead moment.... top level li ? Link to comment Share on other sites More sharing options...
dsonesuk Posted September 4, 2014 Share Posted September 4, 2014 (edited) Yes, li where it area1, area2 etc for question and add answer below in its child ul li <li>Area 1 blah blah blah <ul> <li><p>Lorem ipsum dolor sit amet, ut enim ad minim veniam, ut aliquip ex ea commodo consequat. Sed do eiusmod tempor incididunt eu fugiat nulla pariatur. Quis nostrud exercitation lorem ipsum dolor sit amet, consectetur adipisicing elit.</p> <p>Qui officia deserunt ut labore et dolore magna aliqua. Sed do eiusmod tempor incididunt sunt in culpa duis aute irure dolor. Cupidatat non proident, consectetur adipisicing elit, lorem ipsum dolor sit amet. Ullamco laboris nisi</p></li> </ul> </li> Edited September 5, 2014 by dsonesuk Link to comment Share on other sites More sharing options...
Scotty Posted September 4, 2014 Author Share Posted September 4, 2014 Cool that makes sense, what level does the code go into too ? as in page, form, object ? Sorry, first time I have tried to do javascript, as used to use a drag and drop builder, but now getting braver.... well trying too Link to comment Share on other sites More sharing options...
dsonesuk Posted September 4, 2014 Share Posted September 4, 2014 I dont understand, what level, code? You place inline css or link to external css file within <head>...</head>, and place amended html to your needs in body. Link to comment Share on other sites More sharing options...
Scotty Posted September 5, 2014 Author Share Posted September 5, 2014 Sorry, I'm new to javascript is all hence to beginner questions, I meant which objects does the code get placed in. I'm using a mouserollover option on the question bar to change the question which should be displayed over the question mark image. I have tried various places to put the code and i cant get it to work so i must be missing something. Once again thanks for all your help and patience Link to comment Share on other sites More sharing options...
dsonesuk Posted September 5, 2014 Share Posted September 5, 2014 Javascript code can placed in, or linked to it externally within the <head>...</head> but must be applied using window.onload AFTER the elements it targeting is loaded, OR after the target elements within the <body>...</body> Link to comment Share on other sites More sharing options...
dsonesuk Posted September 5, 2014 Share Posted September 5, 2014 You do realised post #2 is all css only, i have javascript tags and jquery links there by default, but they are not necessary for that example. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now