Viewing Creating drop-down FAQ questions and answers
Creating drop-down FAQ questions and answers
|
User: UncleTod 9 years ago
|
|
|
I'm trying to create a simple FAQ page for members of a club. I've searched the web and found an interesting java script that looks okay when I add it to a test page: [code]<script language="java script" type="text/java script" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script> <script type="text/java script"> $(document).ready(function() { $('#faq').find('dd').hide().end().find('dt').click(function() { $(this).next().slideToggle('slow'); }); }); </script> <style type="text/css"> #faq { width: 400px; } #faq dt { color: #2763A5; cursor: pointer; margin: 8px 0; padding: 0; } #faq dd { border: 1px solid #BABAC0; padding: 0; margin: 0; background-color: #FFFFE1; } #faq dd p { padding: 10px; margin: 0; } </style>[/code] [code]<h1>FAQ's</h1> <dl id="faq"> <dt>Question 1</dt> <dd><p>Answer 1</p></dd> <dt>Question 2</dt> <dd><p>Answer 2</p></dd> </dl>[/code] What I'd like to do to improve this is if a visitor clicks Q1 (and A1 drops down), then clicks Q2, I'd like A1 to disappear so there isn't a long list of answers showing, but only the answer associated with the currently-clicked question. Any good ideas or is there a widget that will do this? Thanks my friends! -Tod |
|
|
User: Jumbo T. 9 years ago
|
|
|
The code to toggle and show the text is already there. Now you need to find out how to hide it : http://www.google.com/search?q=jquery+toggle Last edit 9 years ago |
|
|
User: Jumbo T. 9 years ago
|
|
|
Here's another search I did : http://www.google.com/search?q=jquery+list+show+one+hide+others Found this among others : http://stackoverflow.com/questions/18055524/show-one-div-and-hide-others-on-clicking-a-link Followed a link to this : http://jsfiddle.net/UpuDU/ Result : http://trotter.is-best.net/faq/ Last edit 9 years ago |
|
|
User: Roddy 9 years ago
|
|
|
This kind of thing is really simple using the HTML5 details element. Unfortunately it only works with Safari and Chrome since there is a bug in Firefox and, of course, Internet Explorer is still in the dark ages with this one. I am creating a bunch of widgets for HTML5 elements so that more advanced users can employ them to vastly improve the SEO of their sites. There are three widgets that use the details element but, in their present form, they are only suitable for use on the mobile version of the site in their present form. I have made you a prototype widget for creating a question and answer section with turn down arrows. I used a jQuery plugin for this since all EW pages load jQuery anyway. The code includes the HTML5Shiv so that the details element is recognized by out of date browsers and added some tricky CSS to create the right and down arrows in these browsers. Due to the limitations of the widget settings panel, there is only room for eight questions and answers. However, they can be stacked to add more as long as the upper one is given a higher z-index than the one below using the Arrange menu. This is necessary because EW fixes the position of items on the page and expanding ones can't push the ones below them down the page as they would if you were to create the web page using a code editor. If you contact me I will send you a copy of the widget to try. ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Roddy 9 years ago
|
|
|
Here's a Demo page showing two blocks stacked. Note that the visitor has to turn the arrows to close the answer section. If you want one to close as the other opens you would better to use an accordion - something like this one… http://everwebcodebox.com/mobile/2-level-menu.html ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: Jumbo T. 9 years ago
|
|
|
Here's my faq in action : http://trotter.is-best.net/faq/daycare/ |
|
|
User: Roddy 9 years ago
|
|
|
This widget uses an accordion to create the Q & A to get the "open one/close the other" action… http://everwebcodebox.com/widget-test/qa-accordion.html ------------------------------- Roddy Website: http://everwebwidgets.com Contact: http://everwebwidgets.com/ewWidgets-home/contact.html NOTE: I am an EverWeb user and NOT affiliated with EverWeb! Any opinions expressed in this forum are my own. |
|
|
User: UncleTod 9 years ago
|
|
|
Quote: Roddy - 09/09/2014 12:16:54 This widget uses an accordion to create the Q & A to get the "open one/close the other" action… http://everwebcodebox.com/widget-test/qa-accordion.html Roddy, I like your sense of humor in the last question's answer! Too funny! |
|
|
User: UncleTod 9 years ago
|
|
|
Quote: Jumbo T. - 09/09/2014 9:23:32 @ Jumbo T.: Thanks for all your research and helpful tips. I especially liked your daycare FAQ example. Could you post the complete code you used? I can then modify it to suit my needs. -Tod |
|
|
User: Jumbo T. 9 years ago
|
|
|
Here's the page how it will look. Clicking won't work because the required jQuery file is not included. http://trotter.is-best.net/faq/daycare/daycarefaq.html This is the code used. I pasted this in a HTML snippet. http://trotter.is-best.net/faq/daycare/daycarefaq.txt Then it will work as advertised, because EW provides the jQuery file. |
|
|
✔ Best Answer
|
|
|
User: UncleTod 9 years ago
|
|
| @Jumbo T.: Thanks for the .txt file. I created another test page, pasted it in, and off we go! | |
| Post Reply |
| You must login or signup to post. |