To create an expanding grid with CSS & JavaScript follow the steps below:
Demo:
*click on the box to see the effect.
Step1.
Add HTML
<div class="col-container">
<div class="column" onclick="tabExtend('aboutUs')" style="background-color:#2a9d8f;">
About
</div>
<div class="column" onclick="tabExtend('services')" style="background-color:#e9c46a;">
Services
</div>
<div class="column" onclick="tabExtend('contact')" style="background-color:#e76f51;">
Contact
</div>
</div>
<div id="aboutUs" class="expandedTab">
<span onclick="this.parentElement.style.display='none'" class="close">×</span>
<h2>About Us:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros metus, rhoncus eu dolor sed, scelerisque efficitur nunc. Nunc tempus risus porta nisi mollis consequat. Cras eu ultrices dui. </p>
</div>
<div id="services" class="expandedTab">
<span onclick="this.parentElement.style.display='none'" class="close">×</span>
<h2>Services:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros metus, rhoncus eu dolor sed, scelerisque efficitur nunc. Nunc tempus risus porta nisi mollis consequat. Cras eu ultrices dui. </p>
</div>
<div id="contact" class="expandedTab">
<span onclick="this.parentElement.style.display='none'" class="close">×</span>
<h2>Contact:</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse eros metus, rhoncus eu dolor sed, scelerisque efficitur nunc. Nunc tempus risus porta nisi mollis consequat. Cras eu ultrices dui. </p>
</div>
function tabExtend(name) {
var i, x;
x = document.getElementsByClassName("expandedTab");
for (i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
document.getElementById(name).style.display = "block";
}
To create the CSS responsive two-column layout (two equal columns, or two unequal columns) follow the steps below:
Demo (two equal columns):
Column 1
Add some text here..
Add some text here..
Add some text here..
Add some text here..
Column 2
Add some text here..
Add some text here..
Add some text here..
Add some text here..
*resize the browser window to see the responsive effect.
Step1.
Add HTML
Create the column container and add two columns:
<div class="content">
<div class="col" style="background-color:#2a9d8f;">
<h4>Column 1</h4>
<p>Add some text here..</p>
<p>Add some text here..</p>
<p>Add some text here..</p>
<p>Add some text here..</p>
</div>
<div class="col" style="background-color:#e9c46a;">
<h4>Column 2</h4>
<p>Add some text here..</p>
<p>Add some text here..</p>
<p>Add some text here..</p>
<p>Add some text here..</p>
</div>
</div>
*resize the browser window to see the responsive effect.
Step1.
Add HTML
Create the column container and add two columns:
<div class="col-container">
<div class="col-1 left" style="background-color:#2a9d8f;">
<h4>Column 1</h4>
<p>Add Some text here..</p>
<p>Add Some text here..</p>
<p>Add Some text here..</p>
<p>Add Some text here..</p>
</div>
<div class="col-1 right" style="background-color:#e9c46a;">
<h4>Column 2</h4>
<p>Add Some text here..</p>
<p>Add Some text here..</p>
<p>Add Some text here..</p>
<p>Add Some text here..</p>
</div>
</div>