Replace a DIV with multiple class with a new class on click
<p>My HTML is as follow. </p>

<pre><code>&lt;div class="box w-25 h-25"&gt;
&lt;p&gt;test&lt;/p&gt;
&lt;/div&gt;
&lt;div class="box w-30 h-30"&gt;
&lt;p&gt;test&lt;/p&gt;
&lt;/div&gt;
&lt;div class="box w-30 h-30"&gt;
&lt;p&gt;test&lt;/p&gt;
&lt;/div&gt;
</code></pre>

<p>and my css</p>

<pre><code>.test {
width:100%
height:100%
z-index: 999
}

.box {
....
}

.w-25{ width: 25%; }
.w-30{ width: 30%; }
.w-40{ width: 40%; }

.h-25{ height: 25%; }
.h-30{ height: 30%; }
.h-40{ height: 40%; }
</code></pre>

<p>Is it possible to replace the original class with .test when I click on them individually with jQuery as to create an overlay effect?</p>
