See http://www.niora.com/css-oscommerce.php for a link to an example.
FAQS JQuery style displays a list of questions. When you click on a question, or it's icon, the answer quickly fades in beneath with a professional Jquery javascript effect. Click to close the answer and it fades out just as nice. Uses div and h2 tags instead of tables for easier CSS styling.
Adapted from 'Javascript, the Missing Manual' by David S McFarland p227
http://www.sawmac.com/js/
The question and answers are typed directly into the catalog page, faqs.php. This reduces server load to the database to retrieve answers, and eliminates the page jumping around, the 'return to top', as the user clicks on questions. No admin interface is needed. Installation is simple.
1) Download the free Jquery library, jquery.js, from:
http://docs.jquery.com/Downloading_jQuery
I have included a copy of jquery.js in this contribution. However, it will not be the most recent version.
Upload the this file, jquery.js, to the same level you uploaded faqs.php to, the main catalog level - (you can upload it to anywhere you like as long as you change the reference in faqs.php to match)
2) Upload the two faqs files and two images.
3) Paste the following into stylesheet.css
/*jquery faqs */
#faqs h2 {
background: url(images/open.png) no-repeat 0% 10%;
padding:0px 0px 5px 20px;
cursor: pointer;
font:12px/1.6em Verdana, arial, helvetica, sans-serif;
font-weight: normal;
color: #666666;
}
#faqs h2.close {
background-image: url(images/close.png);
}
#faqs .answer {
background-color: white;
padding:0px 0px 5px 30px;
border-bottom:1px dashed #CCCCCC;
margin-bottom:5px;
}
3) Open includes/filenames.php and add:
// FAQS JQuery Style
define('FILENAME_FAQS', 'faqs.php');
before the closing ?> tag
4) Open includes/boxes/information.php and
add:
'<a href="' . tep_href_link(FILENAME_FAQS) . '">' . BOX_INFORMATION_FAQS . '</a><br>' .
after:
'<a href="' . tep_href_link(FILENAME_CONDITIONS) . '">' . BOX_INFORMATION_CONDITIONS . '</a><br>' .
5) Open includes/languages/english.php
find:
define('BOX_INFORMATION_CONTACT', 'Contact Us');
just below add:
define('BOX_INFORMATION_FAQS', 'Faqs');