At the moment i have several divs that display information when you hover on them. I'd like to change this to onClick with a smooth transition, without a plugin.
I'm not sure how to do this as a lot of tutorials i've seen use a plugin.
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>