在悬停时更改为单击，在div上具有平滑效果

Question

目前我有几个div，当你将它们悬停在它们上面时会显示信息。我想将此更改为onClick，平滑过渡，没有插件。

我不知道怎么做这个，因为很多教程我见过使用插件。

   function hoverTiles(){
        var tiles = $('.button');
        tiles.removeClass('active');

       tiles.hover(function(){
   $(this).addClass('active');
}, function() {
   $(this).removeClass('active');
})
    }
    
$(document).ready(function() {

    hoverTiles();

  })

.doclist {
  list-style-image: url("/pageassets/test1/download.png");
  text-align: left;
}
.buttons .button h4 {
  z-index: 3;
  position: absolute;
  bottom: 5%;
  left: 5%;
  width: 82%;
}
.button:nth-child(1) span i {
  color: #00838e;
}
.button:nth-child(2) span i {
  color: #ff6c00;
}
.button:nth-child(3) span i {
  color: #00a7ff;
}
.button:nth-child(4) span i {
  color: #00652b;
}
.button:nth-child(5) span i {
  color: #d80000;
}
.buttons {
  margin-top: 50px;
  text-align: center;
}
.buttons .button {
  display: inline-block;
  position: relative;
  overflow: hidden;
  width: 32%;
  height: 300px;
  background: #fff;
  border: 1px solid #efefef;
  border-radius: 1px;
  margin: 5px;
  vertical-align: top;
  -webkit-transition: 0.1s all ease-in-out;
  -moz-transition: 0.1s all ease-in-out;
  -ms-transition: 0.1s all ease-in-out;
  -o-transition: 0.1s all ease-in-out;
  transition: 0.1s all ease-in-out;
}
.buttons .button span {
  display: block;
  font-size: 54px;
}
.buttons .button h4 {
  margin-top: 0;
  font-weight: 600;
  color: grey;
}
.buttons .button p {
  font-size: 14px;
  opacity: 0;
  color: grey;
}
.buttons .button p a {
  color: #1489ff;
  text-decoration: none;
}
.buttons .active {
  width: 32%;
  height: 100%;
}
.buttons .active span {
  font-size: 81px;
}
.buttons .active p {
  opacity: 1;
}
.buttons .active h4 {
  margin-top: 15px;
  display: none;
}

<div class="buttons">

  <div class="button active">
    <span><i></i></span>
    <div class="header">
      <img src="/pageassets/test1/keydocs.jpg" alt="" />
      <h4 style="color:black;">Key Documents</h4>
    </div>
    <ul class="doclist">
      <p><strong>Key Documents</strong>
      </p>
      <li><a href="#">Handbook</a>
      </li>
      <li><a href="#">Description</a>
      </li>
      <li><a href="#">Role Description</a>
      </li>
      <li><a href="#">Role Description </a>
      </li>
      <li><a href="#">Role Description</a>
      </li>
      <li><a href="#">Role Description</a>
      </li>
      <li><a href="#">Description </a>
      </li>

    </ul>
  </div>

  <div class="button">
    <span><i></i></span>
    <div class="header">
      <img src="/pageassets/test1/keydocs.jpg" alt="" />
      <h4 style="color:black;">Key Documents</h4>
    </div>
    <ul class="doclist">
      <p><strong>Key Documents</strong>
      </p>
      <li><a href="#">Handbook</a>
      </li>
      <li><a href="#">Description</a>
      </li>
      <li><a href="#">Role Description</a>
      </li>
      <li><a href="#">Role Description </a>
      </li>
      <li><a href="#">Role Description</a>
      </li>
      <li><a href="#">Role Description</a>
      </li>
      <li><a href="#">Description </a>
      </li>

    </ul>
  </div>


</div>
<script language="JavaScript" type="text/javascript" src="/js/jquery-1.2.6.min.js"></script>