Show more than one div onclick show javascript

Question

I'm using a simple div onclick show using javascript and at the moment when you click on each div it shows the next one in the line.

How could I make it possible to make more than one div show at a time? In the HTML I tried changing the div name onclick to more than one such as (when you click it shows div q1/q2/q3):-

<a class="hide" onclick="showdiv('q1, q2, q3'); " href="#">

But the above didn't work.

Here's my code as it is at the moment:-

JS

function showdiv(id){
document.getElementById(id).style.display = "table";
}

HTML

<a class="hide" onclick="showdiv('q1'); " href="#">
<div id="q0" class="circle-160 yellow-circle">
   <div class="circle-content">
       ENABLER: Internal risk management capability</div>
</div>
</a>

<a class="hide" onclick="showdiv('q2'); " href="#">
<div id="q1" class="circle-160 orange-circle">
   <div class="circle-content">
       Are you concerned about suppliers' capability to meet outcomes?</div>
</div>
</a>

<a class="hide" onclick="showdiv('q3'); " href="#">
<div id="q2" class="circle-160 orange-circle">
   <div class="circle-content">
       Are you concerned about financial risks associated with this project?</div>
</div>
</a>

Answer 1

If I got your question right, you can do it as:

function showdiv(){
   var divs = document.getElementsByClassName("myDivToShow");
   for (var i=0; i<divs.length; i++){ 
      divs[i].style.display = "table";
   }
}

And add "myDivToShow" class to all your div's, that you want to show.

Answer 2

You can use a show method like this.

function showdiv(){
  for (var i = 0, j = arguments.length; i < j; i++) {
    document.getElementById(arguments[i]).style.display = "table";    
    }
}

Then you can use it like this.

showdiv("q1","q2");

Answer 3

You can use the jquery plugin and to ease your work on javascript end. Use the div class value to show or hide the div.

$('.hide').hide(); //this will hide all the div with class name "hide"
$('.hide').show(); //this will show all the div with class name "hide"
$('.hide').toggel(); //this will toggel the div visibility for all the div with class name "hide"

There is a good article on this which cover all these stuff http://www.randomsnippets.com/2011/04/10/how-to-hide-show-or-toggle-your-div-with-jquery/ .