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>
2

You can concatenate (glue) strings in JavaScript:

var h = "Hello";
h += " World"; // now h contains "Hello World"

Since className property is a string, you can add something to it too:

el.className += " anotherClass";

And when you’ll do that don’t forget that classes should be separated with spaces (that’s why I’ve added one before anotherClass in example above).

3

if you’re using a decently modern browser, you can make use of the classList property:

el.classList.add('anotherClass');
5

Thanks for your quick rly. :smile:

One more can you help me that onclick i am increasing the boxes width and height by 100px and adding shadow, if you clearly observed that though i had given z-index property , it’s not popping out over the other boxes and also how can we increase the width and height from the middle of the box which should not effect the current box places.

6 
<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>
</head>


<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.classList.add('myBox');
}
</script>

Regarding on the above code, onclicking i am increasing the boxes width and height by 100px and adding shadow, if you clearly observed that though i had given z-index property , it’s not popping out over the other boxes and also how can we increase the width and height from the middle of the box which should not effect the current box places.

7

http://www.w3schools.com/cssref/pr_pos_z-index.asp
Note: z-index only works on positioned elements (position:absolute, position:relative, or position:fixed).

You can simulate that by moving block to left and top by half of width and height

.box1{
    width:100px;
    height:100px;
}
.myBox{
    width:200px; margin-left: -100px;
    height:200px; margin-top: -100px;
}
9

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.