Showing & Hiding Text with Javascript

Question

I have some javascript code for a FAQ page for my site. So, you click on the question and the answer appears. NOW, what I can't figure out is when I have clicked on one question and that is open, when I click on another I want the previous one to close. Basically, so there is only ever ONE open at a time. Found similar code, but not exactly what I'm looking for.

Any help would be great, here's my code. THANKS!!!! Kait

<script type="text/javascript">
function unhide(divID) {
var item = document.getElementById(divID);
if (item) {
item.className=(item.className=='hidden')?'unhidden':'hidden';
}
}
</script>

<p><a href="javascript:unhide('q1');">Here is my Question???</a></p>

<div id="q1" class="hidden">
<p>The Answer goes here.</p>
</div>

<p><a href="javascript:unhide('q2');">Here is my 2nd Question???</a></p>

<div id="q2" class="hidden">
<p>The 2nd Answer goes here.</p>
</div>

Answer 1

use a variable to store a reference to the previously shown element, then hide it before showing the one you want to unhide

<script type="text/javascript">
    var previous;
    function unhide(divID) {
        var item = document.getElementById(divID);

        if (previous != null)
            previous.className='hidden';

        if (item) {
            item.className=(item.className=='hidden')?'unhidden':'hidden';
            previous = item;
        }
    }
</script>

<p><a href="javascript:unhide('q1');">Here is my Question???</a></p>

<div id="q1" class="hidden">
<p>The Answer goes here.</p>
</div>

<p><a href="javascript:unhide('q2');">Here is my 2nd Question???</a></p>

<div id="q2" class="hidden">
<p>The 2nd Answer goes here.</p>
</div>

Example
http://jsfiddle.net/hLkks

Answer 2

Give all the answers a class name then select them all and hide them before you reveal the one that you just clicked. If you are using jQuery

$(".answers").addClass("hidden");
$("#"+id).removeClass("hidden");

Answer 3

There is a really simple approach. Improving on Wryte's answer, just add a click event to all items which adds a class to the active one and removes this from all the others.

item.addEventListener("click", function () {
    var items = this.parentNode.childNodes;

    for (var i=0; i < items.length; i++) {
        items[i].className = "";
    }
    this.className = "active";
}, false);

Fiddle: http://jsfiddle.net/Met3T/

Each item can be whatever you like and you don't need any framework, just plain ole JavaScript.

The CSS could be simple as this:

li {
    height: 2em;
    background: green;
    overflow: hidden;
    margin-bottom: 5px;
}
.active {
    height: auto;
}

Answer 4

$(".header a.toggle").click(function(){
                    if($(this).hasClass("expanded")){
                        $(this).removeClass("expanded").addClass("collapsed")
                            .parent().siblings(".body").hide()
                    }
                    else{
                        $(this).removeClass("collapsed").addClass("expanded")
                            .parent().siblings(".body").show()
                    }
                });

Heres a example where it looks if class is expanded or collapsed

<a class='toggle expanded' href='#'>Text</a>

So make a expanded and collapsed in your CSS

Answer 5

<script type="text/javascript">
    var currentItem;
    function unhide(divID) {
        if (currentItem) {
            currentItem.className = 'hidden';
            currentItem = null;
        }
        var item = document.getElementById(divID);
        if (item) {
            item.className = 'unhidden';
            currentItem = item;
        }
    }
</script>