I'm facing a challenge with 3 squares inside one container, each occupying 33.33% of the viewport and placed next to each other. When I click on one square, it should expand to full viewport width and reveal hidden content, while the other two remain adjacent but partially outside the viewport. The container needs to be horizontally scrollable for accessing the remaining squares.
Currently, when I expand one square, the other two automatically move below it instead of staying beside it. How can I fix this issue?
Demo: http://jsfiddle.net/7pg0buL8/
<div class="container">
<div class="tile"></div>
<div class="tile"></div>
<div class="tile"></div>
</div>
.container {
width:450px;
height:150px;
border: 1px solid blue;
overflow-x: scroll;
overflow-y: hidden;
}
.tile {
width:150px;
height:150px;
border:1px solid red;
box-sizing: border-box;
transition: width .5s;
float:left;
background-color:green;
}
.tile.expanded {
width:100%;
}
$(function () {
$('.tile').click(function () {
$('.tile.expanded').removeClass('expanded');
$(this).addClass('expanded');
});
});