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>

@axrwkr won't solve this issue, but that's great! clipped that sucker. will keep in my back pocket for later use.. thanks!! — kaitsie22
– kaitsie22, Commented Mar 1, 2013 at 14:32

user2985029 · Accepted Answer · 2013-03-01 14:33:46Z

2

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

answered Mar 1, 2013 at 14:33

user2985029

Sign up to request clarification or add additional context in comments.

Comments

Wryte · Accepted Answer · 2013-03-01 14:29:55Z

1

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");

answered Mar 1, 2013 at 14:29

Wryte

9153 gold badges10 silver badges24 bronze badges

Comments

Torsten Walter · Accepted Answer · 2013-03-01 14:45:04Z

1

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;
}

answered Mar 1, 2013 at 14:45

Torsten Walter

5,80225 silver badges26 bronze badges

Comments

Maurice Perry · Accepted Answer · 2013-03-01 14:38:08Z

0

<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>

answered Mar 1, 2013 at 14:38

Maurice Perry

32.8k9 gold badges72 silver badges97 bronze badges

Comments

WeeklyDad · Accepted Answer · 2013-03-01 14:34:41Z

0

$(".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

answered Mar 1, 2013 at 14:34

WeeklyDad

3181 gold badge4 silver badges15 bronze badges

Collectives™ on Stack Overflow

Showing & Hiding Text with Javascript

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related