How to handle div size without using Hover

Question

Edited -- Despite having asked exclusively in css, I saw that in fact the final result in JS is much more professional and lean. Being so I confirmed the reply of @Renan as the one that actually helped. Yet I remark here that @Fetz’s response was really the best output for using CSS in this case. However the end effect is ugly, moving the whole page of place.

My doubt is simple. I have used much the :hover in CSS and has served me to some extent.

However I’ve been wanting something different. I wish I could click on one div so that it would grow in size, and I would have to click on it in a specific corner so that it would shrink.

The hover is part of the process, but when I take the mouse off the div it returns to previous size.

What I want is for div only change when I click on it. And if possible it only returns to its original form if I click on one X for example or outside the div in question.

I’ve searched a lot, I found some things in JS, but I’m doing my best not to use JS in this project. So I started to imagine that with PHP this is possible. Or some CSS keyword to put in stylesheet in place of hover.

Do you have any word reserved for this as for example a possible onmouseclick of life???

Grateful in advance.

#atredit{
    position:absolute;
    width: 150px;
    height: 75px;
    background-color: #F5F5F5;
    border: 1px solid #111111;
    border-radius: 5px;
    margin-top: 150px;
    margin-left: 200px;
    overflow: hidden;
    cursor:pointer;

}
#atredit:hover{
    width: 150px;
    height: 300px;
    transition: 0.5s ease-in-out;

}

Answer 1

You can enter a class responsible for increasing the size of the div when this is clicked, for example, a class that expands the size of the div in 'x' pixels.

How you do this depends on the support you want to give users (actually the browser they use). There is the API classList but Internet Explorer still has partial implementation, such as you can see in this link. However I found that question in Stackoverflow^en where there are ways around this "problem" in the IE.

An example using the API classList:

document.querySelector('div').addEventListener('click', function() {
  this.classList.toggle('ativa');
});

div {
  width: 200px;
  height: 100px;
  background: red
}
div.ativa {
  width: 400px
}

<div></div>

document.getElementById('foo').addEventListener('click', function() {
  this.classList.toggle('ativa');
});

#foo {
  width: 200px;
  height: 100px;
  background: red
}
#foo.ativa {
  width: 400px
}

<div id='foo'></div>

Answer 2

With css you can only do so:

If you use the pseudo selector target instead of the hover.

To use target, you need to have an id (eg:<div id="show">) in the growing element and a link pointing to the id of the element you want to grow (ex: show) prefixed # (ex:<a href="#show">)

html:

<a href="#">x</a>
<div id="show">
    <a href="#show">
      <img src="http://placekitten.com/g/300/201" alt="Kitten 2"/>
    </a>
</div>

css:

#show img {
    height: 150px;
}

#show:target img {
    height: 300px;
}

working example: http://jsfiddle.net/zzsLb6g9/