I am working with a grid that contains various elements, each with the class item. When I click on one of these elements, I toggle the class expand to resize the element.
<body>
<div class="grid">
<a href="#">
<div class="item" style="background-image: url('https://i.giphy.com/l0NwI1oBNxYfoRRny.gif'); height: 270px; background-size: cover; background-repeat: no-repeat; position: absolute;">
</div>
</a>
<a href="#">
<div class="item" style="background-image: url('https://i.giphy.com/pYI1hSqUdcBiw.gif'); height: 202px; background-size: cover; background-repeat: no-repeat; position: absolute;">
</div>
</a>
<a href="#">
<div class="item" style="background-image: url('https://i.giphy.com/l3vR58nYgtIUKua1G.gif'); height: 149px; background-size: cover; background-repeat: no-repeat; position: absolute;">
</div>
</a>
<a href="#">
<div class="item" style="background-image: url('https://i.giphy.com/3o7abxtmPxanzaESGY.gif'); height: 202px; background-size: cover; background-repeat: no-repeat; position: absolute;">
</div>
</a>
...
</div>
</body>
CSS
.item {
color: white;
display: table;
font-size: 1.4em;
text-align: center;
margin: 5px;
width: 270px;
}
.expand {
transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
-webkit-transition: width 0.5s, height 0.5s, left 0.5s, top 0.5s;
height: 100% ;
width: 100%;
left: 0 !important;
top: 0 ;
z-index: 99;
text-indent: -9999px;
}
JS
$('.item').click(function() {
$(this).toggleClass('expand');
});
Initially, the width is resized to 100% of the parent size (grid), but the height remains unchanged.
This is the grid view before clicking on any item element
After clicking on the third element
The problem arises when trying to change both height and width using the following JS method:
$('.item').click(function() {
var height = $(this).height();
var width = $(this).width();
var act = $(this).hasClass("expand");
if(act) {
$('.expand').css('height', Math.floor($('.grid').width() * height / width) + 'px !important');
$('.expand').css('width', '50% !important');
}
});
However, despite this attempt, the height and width do not change. It seems that the $('.expand').css() method is not applying the new values for some unknown reason.