Toggling Active States

Question

Easy question for a lot of you but I'm still learning. I'm trying to get better at toggling between active and inactive states of simple objects.

I have a square div:

<div id = "square"></div>

With the following css to, onclick, make the div extend

#square
 {
 height: 50px;
 width: 60px;
 border: 1px solid red;
 transition: height 2s ease;
}

#square:active
{
 height: 100px;
}

And the following javascript to set up the click event:

var square = document.getElementById("square").addEventListener("click",    function()
{
this.classList.toggle("active");

}, false);

But nothing seems to happen when I click. I'm including JS in this because I'm also new to learning JS as well, and I'm trying to get used to simple logic principles.

Here is the fiddle: https://jsfiddle.net/theodore_steiner/fsk6y50k/4/

Any help would be wonderful

Answer 1

The way that you used the class selector is wrong,

#square.active{
 height: 100px;
}

It should precede with a dot not a colon

DEMO