I’ll try to fill this post with as many relevant key words as possible given it took me a while to find an answer for what I was looking for.  I needed to construct a Q&A section of a website, or frequently asked question (FAQ) list, and it was getting too long to have both the questions and answers visible without the page seeming overwhelming.  I dug around for a while looking for the solution to this problem which I’ve seen used on various websites, and that is to have the FAQ built where only the question shows, and if you click on it, the answer drops down / flys out below it, but otherwise, is not taking up visible space in the page.

I found a post on Stack Overflow from “Prasad Jadhav” in October 2012 which gave me a quick and simple solution to accomplish this.  You have to do nothing more than make a simple unordered (i.e. bulleted) list in html, wrap a div tag around it, and then include a small snippet of javascript in the page.

Within wordpress, since I use TinyMCE to edit posts, I simply had to switch the post to the Text tab, add the div tag and javascript, then switch it back, and we are good to go.

Here’s a link to the post with the code and example:  http://stackoverflow.com/questions/10056191/javascript-faq-drop-down

On the off chance that site/link goes away at some point, I’ll include the code here too, with credit to Prasad Jadhav for posting it (assuming he’s the original author of the code).

HTML sample code:

<div id="QA">
<ul>
<li>Question 1</li>
<li>Answer 1</li>
<li>Question 2</li>
<li>Answer 2</li>
 </ul>
<ul>
<li>Question 3</li>
<li>Answer 3</li>
<li>Question 4</li>
<li>Answer 4</li>
 </ul>
</div>

Javascript code:

<script type="text/javascript">
    function toggle(tag) {
        var x=document.getElementsByName(tag)[0];
        var a = x.parentNode
        if (a.style.display=='block'){
            a.style.display='none'
        }else{
            a.style.display='block'
        }
    }


    function init() {
        //this function will add show hide functionality to paired list items,
        //as long as the answer is a list item straight after the question list item.
        //You can also have as many separate lists as you want.
        //all lists must be contained within a div with id QA

        var obj = document.getElementById('QA2');
        var elements = obj.getElementsByTagName('li');
               var index = 1
        //add javascript to question elements
              //you could also add styling to question elements here
        for (var i=0; i < elements.length; i+=2){
            var element = elements[i];
            element.innerHTML = "<a href='javascript:toggle(" + index + ")'>" + element.innerHTML + "</a>"
            index = index + 1
        }
        //add bookmark to answer elements and add styling
        var index = 1
        for (var i=1; i < elements.length; i+=2){
            var element = elements[i];
            element.innerHTML = "<a name='" + index + "' id='" + index + "'></a>" + element.innerHTML
            index = index + 1
                 element.style.padding = '0px 0px 10px 20px' //add indent to answer
                       element.style.listStyleType = 'none' //remove bullet
            element.style.display = 'none' //hide answer element
        }
     }


window.onload = init;
</script>