Toggle class

JavaScript
1

Hello,

I had written the below code for toggle effect, it is working fine. Just wanted to know how to add additional class to the existing one.

Ex: if you see below code, there is 2 classes box1 and myBox, just i am replacing the box1 with myBox by clicking but i want box 1 should be there in the div just i want to add additional class myBox (which have some additional props)

Thanks in advance.

<style>
.box1{float:left; background-color:#CCC; width: 100px; height: 100px; padding:10px;text-align:center; }
.myBox{float:left; background-color: #0c0; z-index:9999; box-shadow: 1px 1px 5px #888888; height:200px; width:200px; z-index:10;}
</style>


<div id="boxgroup">
<div class="box1" onclick="toggleclass(this)">Box with active class</div>
<div class="box1" onclick="toggleclass(this)">Box with active class</div>
<div class="box1" onclick="toggleclass(this)">Box with active class</div>
<div class="box1" onclick="toggleclass(this)">Box with active class</div>
</div>
<script>
function toggleclass(el){
var hbox = document.getElementById('boxgroup').children;
for(var i=0; i<hbox.length; i++){
    hbox[i].className= "box1";
    }
    el.className= 'myBox';
}
</script>