Javascript - Hide other divs when one is clicked, but no double click

Question

I used the answer to this question for a problem I originally had: JavaScript - Hide all other divs

It works for what I need to do, but I want to make it so that when you click on original div you used to activate the slide, it doesn't hide that displaying slide. So you don't have a double click for the current active div.

<script>
var divState = {};
function showhide(id) {
if (document.getElementById) {
    var divid = document.getElementById(id);
    divState[id] = (divState[id]) ? false : true;
    //close others
    for (var div in divState){
        if (divState[div] && div != id){
            document.getElementById(div).style.display = 'none';
            divState[div] = false;
        }
    }
    divid.style.display = (divid.style.display == 'block' ? 'none' : 'block');
}
}
</script>

You can check my project here, when you try to click on a character, it changes slides, but when you double click on them, it hides the slide you are looking at. I want to block the "hide" function, so if you are looking at a characters slide. You can't click their illustration again to switch it off. But if you click a different character, it will hide/switch the slides: http://www.redvelvetevents.com/tracy/newtest_july2013.htm

Hopefully this is making sense. What do I need to add to the code above so the current div won't activate the HIDE function for that specific slide? Only when you click a different character.

Thanks!

Answer 1

You can change your code to this:

var divState = {};
function showhide(id) {
if (document.getElementById) {
    var divid = document.getElementById(id);
    divState[id] = true;//I changed this line
    //close others
    for (var div in divState){
        if (divState[div] && div != id){
            document.getElementById(div).style.display = 'none';
            divState[div] = false;
        }
    }
    divid.style.display = 'block';//I changed this line
}
}