Hiding and showing multiple divs and hiding headings using JQuery

Question

I am hiding and showing multiple divs with a Select. When I show a div then I am also showing it's associated heading. This is all working perfectly except for one thing:

When I select "Show All" I want to show the content divs but NOT their headings. So basically I want the display to go back to the way it started. Only the content items and no headings. When you select a particular item then that item must show with it's heading (as it currently does), but when you then want to see all the items then the content items must show but not the headings.

I tried to create a fiddle but getting the error "(index):74 Uncaught TypeError: Illegal constructoronchange @ (index):74". It works fine with me, but I can't get it to work in the fiddle.

<script type="text/javascript">
/*<![CDATA[*/

function Selection(sel,cls){
 var objs=bycls(cls),z0=0;
 for (;z0<objs.length;z0++){
  objs[z0].style.display=objs[z0].className.indexOf(sel.value)>-1||sel.value=='ShowAll'?'block':'none';
 }
}

 function bycls(nme){
  for (var reg=new RegExp('\\b'+nme+'\\b'),els=document.getElementsByTagName('DIV'),ary=[],z0=0; z0<els.length;z0++){
   if(reg.test(els[z0].className)){
    ary.push(els[z0]);
   }
  }
  return ary;
 }                  
/*]]>*/
</script>

<div>
  <form class="form-inline">
  <label for="show">Show</label> 
  <select name="type" onchange="Selection(this,'Selection');" class="form-control" style="width: 150px;" id="show">
  <option value="ShowAll">Show All</option>
  <option value="Selection2">Only 2</option>
  <option value="Selection3">Only 3</option>
  <option value="Selection4">Only 4</option>
  <option value="Selection5">Only 5</option>
  </select>
  </form>
</div>

<!--- HEADING FOR DIV 2  --->
<div class="Selection Selection2" style="display: none;">
  <h2>Heading 2</h2>
</div>

<!--- HEADING FOR DIV 3  --->
<div class="Selection Selection3" style="display: none;">
  <h2>Heading 3</h2>
</div>

<!--- HEADING FOR DIV 4  --->
<div class="Selection Selection4" style="display: none;">
  <h2>Heading 4</h2>
</div>

<!--- HEADING FOR DIV 5  --->
<div class="Selection Selection5" style="display: none;">
  <h2>Heading 5</h2>
</div>

<!--- CONTENT FOR DIV 2  --->
<div class="Selection Selection2">
  <p>Content for 2</p>
</div>

<!--- CONTENT FOR DIV 3  --->
<div class="Selection Selection3">
  <p>Content for 3</p>
</div>

<!--- CONTENT FOR DIV 4  --->
<div class="Selection Selection4">
  <p>Content for 4</p>
</div>

<!--- CONTENT FOR DIV 5  --->
<div class="Selection Selection5">
  <p>Content for 5</p>
</div>

Answer 1

$('#show').on('change', function(){
var val = $(':selected',this).attr('value');
if (val === 'ShowAll') {
$('.Selection').show()
$('.Selection').has('h2').hide();
} else {
$('.Selection').hide()
$('.'+val).show()
}
})

Thanks to DaniP for the solution. Fiddle here: https://jsfiddle.net/cxj9yj8p/