I want to arrange boxes dynamically in a container using flexbox. The arrangement looks like this:
For three or four boxes, the boxes should arrange like in first pic.
For six boxes, the boxes should fit in two rows with three columns. However for seven boxes, the arrangement should look like that displayed in second picture, and so on.
The width and height of the container are fixed.
Is this possible purely with Flexbox?
HTML:
<div class="container">
<div class="box">AB</div>
<div class="box">CD</div>
<div class="box">EF</div>
<div class="box">GH</div>
<div class="box">IJ</div>
<div class="box">KL</div>
<div class="box">MN</div>
<div class="box">OP</div>
<div class="box">QR</div>
<div class="box">ST</div>
<div class="box">UV</div>
<div class="box">XY</div>
</div>
CSS:
.container {
width: 160px;
height: 160px;
border: 1px solid blue;
display: flex;
}
.box {
border: 1px solid red;
text-align: center;
}
JavaScript:
function align(nodes) {
var nodeLength = nodes.length;
if(nodeLength == 1) {
// nodes occupies entire box
}
else if (nodeLength == 2) {
// nodes displayed in two columns
}
else if(nodeLength > 2 && nodeLength < 5) {
// nodes displayed in two rows, two columns
}
else if(nodeLength > 4 && nodeLength <= 6) {
// display in two columns and three rows
}
/*
.
.
.
and so on
*/
}
var boxes = document.getElementsByClassName('box');
align(boxes);
Here is a fiddle for the same.
Flexbox solution (without JavaScript)
Calculate width and height of each item in the square as follows
.square-item {
width: calc(100% / n);
height: calc(100% / n);
}
n is number of columns (or rows).
Example
.square-wrapper {
display: inline-block;
vertical-align: top;
}
.square {
--size: 160px;
}
.square {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
width: var(--size);
height: var(--size);
}
.square>div {
box-shadow: 1px 3px 3px #abc;
position: relative;
}
.square p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
.square.s-2_2>div {
width: calc(100% / 2);
height: calc(100% / 2);
}
.square.s-3_3>div {
width: calc(100% / 3);
height: calc(100% / 3);
}
.square.s-4_4>div {
width: calc(100% / 4);
height: calc(100% / 4);
}
/* Add more custom square classes */
/* ... */
<div class="square-wrapper">
<div class="square s-2_2">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
</div>
</div>
<div class="square-wrapper">
<div class="square s-3_3">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
<div>
<p>5</p>
</div>
<div>
<p>6</p>
</div>
<div>
<p>7</p>
</div>
<div>
<p>8</p>
</div>
<div>
<p>9</p>
</div>
</div>
</div>
<div class="square-wrapper">
<div class="square s-4_4">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
<div>
<p>5</p>
</div>
<div>
<p>6</p>
</div>
<div>
<p>7</p>
</div>
<div>
<p>8</p>
</div>
<div>
<p>9</p>
</div>
<div>
<p>10</p>
</div>
<div>
<p>11</p>
</div>
<div>
<p>12</p>
</div>
<div>
<p>13</p>
</div>
<div>
<p>14</p>
</div>
<div>
<p>15</p>
</div>
<div>
<p>16</p>
</div>
</div>
</div>
JavaScript solution with flexbox
Get all .square. Loop through them and loop through their children and add a style to each of them.
child.setAttribute("style", "width: ...; height: ...")
The size is calc(100% / Math.sqrt(number of square items))
Example
var squares = document.querySelectorAll(".square");
for (var i = 0; i < squares.length; i += 1) {
for (var j = 0; j < squares[i].children.length; j += 1) {
var child = squares[i].children[j],
size = "calc(100% /" + Math.ceil(Math.sqrt(squares[i].children.length)) + ")";
child.setAttribute("style", "width: " + size + "; height: " + size);
}
}
.square-wrapper {
display: inline-block;
vertical-align: top;
}
.square {
--size: 160px;
}
.square {
display: flex;
flex-wrap: wrap;
align-content: start;
width: var(--size);
height: var(--size);
}
.square>div {
box-shadow: 1px 3px 3px #abc;
position: relative;
}
.square p {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
<div class="square-wrapper">
<div class="square">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
<div>
<p>5</p>
</div>
</div>
</div>
<div class="square-wrapper">
<div class="square">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
</div>
</div>
<div class="square-wrapper">
<div class="square">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
<div>
<p>5</p>
</div>
<div>
<p>6</p>
</div>
<div>
<p>7</p>
</div>
<div>
<p>8</p>
</div>
<div>
<p>9</p>
</div>
</div>
</div>
<div class="square-wrapper">
<div class="square">
<div>
<p>1</p>
</div>
<div>
<p>2</p>
</div>
<div>
<p>3</p>
</div>
<div>
<p>4</p>
</div>
<div>
<p>5</p>
</div>
<div>
<p>6</p>
</div>
<div>
<p>7</p>
</div>
<div>
<p>8</p>
</div>
<div>
<p>9</p>
</div>
<div>
<p>10</p>
</div>
<div>
<p>11</p>
</div>
<div>
<p>12</p>
</div>
<div>
<p>13</p>
</div>
<div>
<p>14</p>
</div>
<div>
<p>15</p>
</div>
<div>
<p>16</p>
</div>
</div>
</div>
Related
I am trying to build a lucky draw system. There are 8 cards in each category and 8 people to assign those cards. I want to make a flipping animation on cards that all cards flip till 10 seconds then only one card appear on screen as jackpot. How can I achieve that with CSS and JavaScript?
My current code:-
CSS
.card {
display: grid;
grid-template-columns: 300px;
float: none; /* Added */
margin-top: 50px;
border-radius: 18px;
align-content: center;
margin-left: auto;
margin-right: auto;
background-color: #FFEB3B;
box-shadow: 5px 5px 15px rgba(0,0,0,0.9);
font-family:Lucida Handwriting;
text-align: center;
transition: 0.5s ease;
cursor: pointer;
}
In current system i am loading all cards to screen. How can i make them rotate for 10 seconds and make only one card visible and other disappear on a button click.
I set the required functions. You can call them depending on the usage you want
var elems = document.getElementsByClassName('flip-box-inner');
var totalSecond = 0;
var myTimer;
function RotationCard() {
totalSecond = totalSecond + 1;
for (var i = 0; i < elems.length; i++) {
if(totalSecond == 1)
{
if(i%2 == 0)
{
if(!elems[i].classList.contains("myAnim"))
elems[i].classList.add("myAnim");
else
elems[i].classList.remove("myAnim");
}
}
else
{
if(!elems[i].classList.contains("myAnim"))
elems[i].classList.add("myAnim");
else
elems[i].classList.remove("myAnim");
}
}
if (totalSecond <= 10) {
myTimer = setTimeout(RotationCard, 1000);
}
else
{
ResetAndClearCard();
}
}
function SelectCard()
{
ResetAndClearCard();
var rand = Math.floor(Math.random() * 10) + 1;
for (var i = 0; i < elems.length; i++) {
if(rand == i)
elems[i].classList.add("myAnim");
}
}
function ResetAndClearCard()
{
totalSecond = 0;
clearTimeout(myTimer);
for (var i = 0; i < elems.length; i++) {
if(elems[i].classList.contains("myAnim"))
elems[i].classList.remove("myAnim");
}
}
body {
font-family: Arial, Helvetica, sans-serif;
text-align:center;
}
.flip-box {
background-color: transparent;
width: 300px;
height: 200px;
perspective: 1000px;
display:inline-block;
}
.flip-box-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-box:hover .flip-box-inner {
transform: rotateY(180deg);
}
.flip-box-front, .flip-box-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
}
.flip-box-front {
background-color: #bbb;
color: black;
}
.flip-box-back {
background-color: #555;
color: white;
transform: rotateY(180deg);
}
.myAnim
{
transform: rotateY(180deg);
transition: transform 0.8s;
}
.btn1
{
height:30px;
bordder:1px solid #ddd;
width:150px;
background:#228833;
color:white;
}
.btn2
{
height:30px;
bordder:1px solid #ddd;
width:150px;
background:#2233ff;
color:white;
}
.btn3
{
height:30px;
bordder:1px solid #ddd;
width:180px;
background:#ff2266;
color:white;
}
.btn1:hover,.btn2:hover,.btn3:hover
{
background:#223366;
}
<button class="btn1" onclick="RotationCard()">rotation</button>
<button class="btn2" onclick="SelectCard()">select</button>
<button class="btn3" onclick="ResetAndClearCard()">reset & clear Timer</button>
</div>
<h1>Image Flip with Text</h1>
<h3>Hover over the image below:</h3>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
</div>
<div class="flip-box-back">
<h2>Paris</h2>
<p>What an amazing city</p>
</div>
</div>
</div>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
</div>
<div class="flip-box-back">
<h2>Paris</h2>
<p>What an amazing city</p>
</div>
</div>
</div>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
</div>
<div class="flip-box-back">
<h2>Paris</h2>
<p>What an amazing city</p>
</div>
</div>
</div>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
</div>
<div class="flip-box-back">
<h2>Paris</h2>
<p>What an amazing city</p>
</div>
</div>
</div>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
</div>
<div class="flip-box-back">
<h2>Paris</h2>
<p>What an amazing city</p>
</div>
</div>
</div>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
</div>
<div class="flip-box-back">
<h2>Paris</h2>
<p>What an amazing city</p>
</div>
</div>
</div>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
</div>
<div class="flip-box-back">
<h2>Paris</h2>
<p>What an amazing city</p>
</div>
</div>
</div>
<div class="flip-box">
<div class="flip-box-inner">
<div class="flip-box-front">
<img src="https://unsplash.it/1920/600?image=13" alt="Paris" style="width:300px;height:200px">
</div>
<div class="flip-box-back">
<h2>Paris</h2>
<p>What an amazing city</p>
</div>
</div>
</div>
I have these progress bars which are suppose to work as ratings and they look good:
I have applied some CSS and I change their width with JavaScript by reading values from text files.
But are not responsive at all and whenever the window is resized:
HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<div class="second-part">
<div class="row">
<div class="side">
<div>5 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar11" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p11">150</div>
</div>
<div class="side">
<div>4 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar12" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p12">63</div>
</div>
<div class="side">
<div>3 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar13" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p13">15</div>
</div>
<div class="side">
<div>2 stars</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar14" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p14">6</div>
</div>
<div class="side">
<div>1 star</div>
</div>
<div class="middle">
<div class="bar-container">
<div class="bar15" style="width: 10% ; height: 18px; background-color: gold;"></div>
</div>
</div>
<div class="side right">
<div class="p15">20</div>
</div>
</div>
</div>
CSS:
* {
box-sizing: border-box;
}
/* Three column layout */
.side {
float: left;
width: 15%;
margin-top:10px;
}
.middle {
margin-top:10px;
float: left;
width: 70%;
}
/* Place text to the right */
.right {
text-align: left;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/* The bar container */
.bar-container {
width: 90%;
background-color: #f1f1f1;
text-align: center;
color: white;
}
/* Responsive layout - make the columns stack on top of each other instead of next to each other */
#media (max-width: 400px) {
.side, .middle {
width: 100%;
}
.right {
display: none;
}
}
JavaScript to change progress bar width:
var par1 = 4;
for(var i = 10; i < 16; i++) {
$('.p' + (i+1)).text(table[0][par1]);
$('.bar' + (i+1)).css("width", table[0][par1]);
par1++;
}
How could I make it more responsive? Thank you in advance!
I recommend using css flexbox, so the items wrap instead of overlap when the page is resized. You could use media queries with this to adjust the size of the items and container so they don't overlap/wrap. This site has a good explanation of flexbox: A Complete Guide to Flexbox.
I want the top position of ".bottom-container" elements be equal to ".top-content" top position, plus ".top" height. The issue is that top and hight values change every time, the div ".container" that contains these elements repeats with the same classes, I had a good answer before to solve the element .each() for height but need to add the top.
I put a class of "level-1", "level-2", etc, to change top position of red box container.
How can I do: .bottom-container top (green box) = .top-content top (red box container with level class) + .top height (red box).
This is the code example:
$(document).ready(function() {
var topContainer = $(".container .top-content .top");
var botContainer = $(".container .column .bottom-container");
tl = topContainer.length;
bl = botContainer.length;
topContainer.each(function(topIndex) {
var _self = $(this);
var topHeight = _self.height();
botContainer.each(function(botIndex) {
if (botIndex >= (bl) * (topIndex / (tl)) && botIndex < (bl) * (topIndex + 1 / (tl))) {
var bc = $(this);
bc.css({
"top": topHeight + "px",
});
}
});
});
});
.container {
position: relative;
display: inline-block;
vertical-align: top;
}
.top-content {
position: absolute;
width: 100%;
z-index: 100;
}
.level-1 {
top: 10px;
}
.level-2 {
top: 20px;
}
.level-3 {
top: 30px;
}
.top {
position: absolute;
background-color: red;
}
.column {
display: inline-block;
height: 200px;
width: 60px;
background-color: gray;
}
.bottom-container {
position : relative;
background-color: green;
}
.bottom-content {
width: 50px;
height: 50px;
background-color: black;
color: yellow;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="top-content level-1">
<div>other thing</div>
<div class="top">
Height change with dynamically content.
</div>
</div>
<section class="column">
<div class="bottom-container">
<div class="bottom-content">
BOTTOM CONTENT 1
</div>
<div>other thing</div>
</div>
</section>
<section class="column">
<div class="bottom-container">
<div class="bottom-content">
BOTTOM CONTENT 2
</div>
<div>other thing</div>
</div>
</section>
<section class="column">
<div class="bottom-container">
<div class="bottom-content">
BOTTOM CONTENT 3
</div>
<div>other thing</div>
</div>
</section>
</div>
<div class="container">
<div class="top-content level-2">
<div>other thing</div>
<div class="top">
Height change with dynamically content, is always different size.
</div>
</div>
<section class="column">
<div class="bottom-container">
<div class="bottom-content">
BOTTOM CONTENT 1
</div>
<div>other thing</div>
</div>
</section>
<section class="column">
<div class="bottom-container">
<div class="bottom-content">
BOTTOM CONTENT 2
</div>
<div>other thing</div>
</div>
</section>
</div>
<div class="container">
<div class="top-content level-3">
<div>other thing</div>
<div class="top">
Height change with dynamically content, is always different size.is always different size.is always different size.
</div>
</div>
<section class="column">
<div class="bottom-container">
<div class="bottom-content">
BOTTOM CONTENT 1
</div>
<div>other thing</div>
</div>
</section>
<section class="column">
<div class="bottom-container">
<div class="bottom-content">
BOTTOM CONTENT 2
</div>
<div>other thing</div>
</div>
</section>
<section class="column">
<div class="bottom-container">
<div class="bottom-content">
BOTTOM CONTENT 2
</div>
<div>other thing</div>
</div>
</section>
</div>
I'm trying to create a horizontal grid for a portfolio.
So it's a grid stacking elements from top to bottom, and when it reaches 3 elements, goes back to the top to start a new column.
Is there a way to add the squares in the container, and when the squares go overflow, to stack them back up?
I'm stuck here > test
I would make the container element a flex-box with the property flex-flow:column wrap;.
#container {
max-height: 700px;
display: flex;
flex-flow: column wrap;
}
.square {
text-align: center;
width: 200px;
height: 200px;
background-color: red;
border: solid 1px white;
}
<div id="container" class="clearfix">
<div class="square">
<p>1</p>
</div>
<div class="square">
<p>2</p>
</div>
<div class="square">
<p>3</p>
</div>
<div class="square">
<p>4</p>
</div>
<div class="square">
<p>5</p>
</div>
<div class="square">
<p>6</p>
</div>
<div class="square">
<p>7</p>
</div>
<div class="square">
<p>8</p>
</div>
<div class="square">
<p>9</p>
</div>
<div class="square">
<p>10</p>
</div>
<div class="square">
<p>11</p>
</div>
<div class="square">
<p>12</p>
</div>
<div class="square">
<p>13</p>
</div>
<div class="square">
<p>14</p>
</div>
<div class="square">
<p>15</p>
</div>
<div class="square">
<p>16</p>
</div>
<div class="square">
<p>17</p>
</div>
<div class="square">
<p>18</p>
</div>
<div class="square">
<p>19</p>
</div>
<div class="square">
<p>20</p>
</div>
</div>
As #Woswsk , i would go for flex, but inline-flex would be my choice to keep columns against each others:
I would also use a pseudo to fill any gap within the last col to mimic bg-color.
If you need bg-color to fill entire width, you'll need an extra wrapper to show it. Snippet below uses body to show the use of extra wrapper. In this case the pseudo has no purpose anymore..
$(function() {
for (var i = 0; i < 20; i++) {
$("#container").append("<div class='square'><p>" + (i + 1) + "</p></div>")
}
});
#container {
max-height: 600px;
/* test also 800 & 1300px to see pseudo behavior*/
display: inline-flex;
flex-flow: column wrap;
background: blue;
}
#container:after {
content: '';
flex: 1;
background: blue;
}
.square {
text-align: center;
width: 200px;
height: 200px;
background-color: red;
border: solid 1px white;
}
* {
box-sizing: border-box;
}
/* body used as extra wrapper for demo show */
html {
background: white;
}
body {
background: lightblue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" class="clearfix"></div>
I want to create three boxes with some short text and when you click on one of those boxes, it will expand on the full width of the page and displays the whole content. Then it can be closed by clicking on some kind of icon.
I created a gif so you can see what I mean. GIF
I have so far the basic structure on jsfiddle
When you click on one box it every time opens the box-3 content insted of the content of the clicked box. Also I dont know how to close the open box.
Is the animation you can see in the gif possible with css or does it need javascriptl?
$(".row.boxes-container .box").click(function (e) {
$(".box-content-full").addClass("open");
});
.row.boxes-container{
position:relative;
}
.box:hover{
cursor:pointer;
}
.box-content{
padding:30px;
background-color:#f03939;
}
.box-content-full{
display:none;
width:0%;
transition: width 1s;
}
.box-content-full.open {
position: absolute;
max-width: 100%;
width: 100%;
z-index: 2;
display:block;
transition: width 1s;
}
.box-content-full.open .inner{
padding:30px;
margin-left:15px;
margin-right:15px;
background-color: red;
}
<div class="container">
<div class="row boxes-container">
<div class="box first">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 1</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 1</h3>
</div>
</div>
</div>
<div class="box second">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 2</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 2</h3>
</div>
</div>
</div>
<div class="box third">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 3</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 3</h3>
</div>
</div>
</div>
</div>
</div>
I did not use your html code but tried to get a result as close as possible to your gif:
$('.box').on('click', function() {
var $element = $(this);
var $openElement = $('<div class="absoluteBox"></div>');
$openElement.css('left', $element.position().left);
$openElement.css('right', $element.width());
$element.html($openElement);
$openElement.animate({left : 0, width : $('.wrapper').width()}, 500);
});
.wrapper {
position:relative;
display:inline-block;
}
.box {
background-color:#CC0000;
width:150px;
height:200px;
display:inline-block;
margin-right:10px;
}
.box:last-of-type {
margin-right:0;
}
.absoluteBox {
position:absolute;
background-color:blue;
height:200px;
width:150px;
}
.box:hover {
background-color:red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wrapper">
<div class="box"></div>
<div class="box">
</div>
<div class="box"></div>
</div>
I made the opening box blue to be better noticed. This has to be changed via css of course to red.
Updated your fiddle:
EDIT 2:
Now it should reset when you click the box.
P.S. Click the second box for the effect.
P.P.S. The effect displays incorrectly because the page contracts automatically in JSFiddle. ALTHOUGH, if you try it elsewhere and it doesn't work, consider me proven wrong!
EDIT:
Updated answer to expand element that was clicked.
https://jsfiddle.net/bszv7f90/9/
$(".row.boxes-container .box").click(function(e) {
$(this).children().each(function(i) {
if ($(this).attr('class') == 'box-content-full') {
$(this).toggleClass("exp");
}
});
$(".box-content-full").toggleClass("open");
$(".box-content").toggleClass("clicked");
});
.container {
max-width: 600px;
}
.row.boxes-container {
position: relative;
}
.box:hover {
cursor: pointer;
}
.box-content {
padding: 30px;
background-color: #f03939;
}
.box-content-full {
display: none;
width: 0%;
transition: width 1s;
}
.box-content {
padding: 30px;
background-color: #f03939;
}
.box-content.clicked {
display: none;
}
.box-content-full.open {
position: absolute;
max-width: 0%;
width: 0%;
z-index: 2;
display: none;
transition: width 1s;
}
.box-content-full.open.exp {
position: absolute;
max-width: 100%;
width: 100%;
z-index: 2;
display: block;
transition: width 1s;
}
.box-content-full.open .inner {
padding: 30px;
margin-left: 15px;
margin-right: 15px;
background-color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row boxes-container">
<div class="box first">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 1</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 1</h3>
</div>
</div>
</div>
<div class="box second">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 2</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 2</h3>
</div>
</div>
</div>
<div class="box third">
<div class="box-content-full">
<div class="inner">
<div class="inner-header">
<span class="close">x</span>
</div>
<h3>Box 3</h3>
<p>Lorem ipsum dolem filum</p>
</div>
</div>
<div class="col-md-4">
<div class="box-content">
<h3>Box 3</h3>
</div>
</div>
</div>
</div>
</div>
Now it should expand.
I preserved your code to make a quick copy-paste.