I have a feeling this is so obvious I’ll be ashamed when (if) solved – but I just can’t make it work.

I have a html+javascript page with multiple items all needing to be shown or hidden via user-clicks.
So I have x amount of div’s like:

<div id="myDIVA" style="display:none;">blabla 1</div>
<div id="myDIVB" style="display:none;">blabla 2</div>
<div id="myDIVC" style="display:none;">blabla 3</div>

and they are hidden and/or shown by clicking div’s:

<div onClick="myClickFunctionA()">Show only ONE</div>
<div onClick="myClickFunctionB()">Show only TWO</div>
<div onClick="myClickFunctionC()">Show only THREE</div>

Simple script goes:

    var a = document.getElementById('myDIVA');
    var b = document.getElementById('myDIVB');
    var c = document.getElementById('myDIVC');
function myClickFunctionA() {
        a.style.display = 'block';
        b.style.display = 'none';
        c.style.display = 'none';
function myClickFunctionB() {
        a.style.display = 'none';
        b.style.display = 'block';
        c.style.display = 'none';

What I would like to do is be able to group the vars so I could have a function like:

function myClickFunctionA() {
        a.style.display = 'block';
        b + c.style.display = 'none';

I have a lot of div’s! So this may seem silly but it would make much sense to me to be able to “group” vars for easier editing.

So I hope someone is up for an easy solution 🙂