FAQ Module Styling

Last updated December 22, 2011. Created by sibopa on December 22, 2011.
Log in to edit this page.

Adding a '+' and '-' icon on FAQ questions when they are respectively collapsed and expanded.
I will start by saying thank you to the people who created and are working on daily basis to keep this great system working (DRUPAL). Thank you as well to the FAQ module developer.
I wanted to accomplish this task without going altering the module or javascript.
Look at the result on the atatched screenshot

The result is to have a 'plus' icon next to collapsed questions and a 'minus' icon next to expanded question.
Everything is done with css manipulation.

1. Create your 2 images: the 'plus' and the “minus”. If you are not good on doing this, you will find thousands of those on google. In my case, I have 2 .gif images; both 16px x 16px in size.
2. Upload the images in your theme images folder.
3. Open your theme css file (mine is 'style.css')
4. If you look at the source code of your FAQ page, you will see the following structure:
   <div class="faq-question-answer">
   This div surrounds each FAQ question, including the title and answer.
   <div class="faq-question faq-dt-hide-answer">
   This surrounds the title.
   <a href=”…….”>xxxx</a>
   This is the FAQ question title.
   <div class="faq-answer faq-dd-hide-answer">
   This div surrounds the answer.
5. Let’s proceed
   • We add this at the bottom of the css file:
   .faq-question-answer {
   position:relative;
   }
   We put this relative because we want to move stuff inside this div and want to make sure they will move and stay inside the div.
   • Then we add this below it
   .faq-dt-hide-answer {
   background: transparent url(images/btn_plus.gif) left no-repeat; padding-left:25px;
   }
   We add the plus image next to the title. This is the default state.
   • Then add this
   .faq-dd-hide-answer {
   position:relative;
   background: transparent url(images/btn_minus.gif) top left no-repeat; padding-left:25px;
   top:-20px;
   padding-top:20px;
   }
   We add the minus next to answer, use the positioning have minus cover the plus in expanded state, and use the padding to bring the text at its regular position.

   At this point, you are almost done. You can click to expand, but no way to collapse as the expanded div is covering the title.
   • Finally, add this
   .faq-dt-hide-answer a {
   position:relative;
   z-index:2;
   }
   This will bring the title in front, making it possible to click to collapse.

   The full css code
   .faq-question-answer {
   position:relative;
   }

   .faq-dt-hide-answer {
   background: transparent url(images/btn_plus.gif) left no-repeat; padding-left:25px;
   }
   .faq-dd-hide-answer {
   position:relative;
   background: transparent url(images/btn_minus.gif) top left no-repeat; padding-left:25px;
   top:-20px;
   padding-top:20px;
   }

   .faq-dt-hide-answer a {
   position:relative;
   z-index:2;
   }

   There must be more effective ways to achieve this, but I hope this may help someone; just my way of giving back what I getting from this system.