Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
How to create an expanding grid with CSS and JavaScript?
An expanding grid is a grid that expands when a box is clicked. It hides by default but gets expanded to 100% when the box is clicked once. We will create three equal columns that floats right next to each other. On clicking any of the grid column, the grid will expand. Also, the expanded area will have a closeable button to close and return to the initial stage.
Create a container for the three columns
Begin with a parent div with three columns. On clicking any of the boxes, the onclick attribute will open the individual tabs ?
Some text on the left
Some text in center
Some text on the right
Position the columns
The three columns are positioned left using the float property. All these columns float next to each other. The width is set to 33% so that each column is equal ?
.left, .right, .center {
float: left;
width: 33%;
color: white;
padding: 10px;
height: 200px;
text-align: center;
}
Script for opening the tab
When any of the boxes will be clicked, the tab will open using the below script ?
The left tab
The following is the code for the left column. On clicking the x symbol, it will close because the onclick attribute is set to display none. This section is hidden by default ?
The center tab
The following is the code for the center column. On clicking the x symbol, it will close because the onclick attribute is set to display none. This section is hidden by default ?
The right tab
The following is the code for the right column. On clicking the x symbol, it will close because the onclick attribute is set to display none. This section is hidden by default ?
Example
To create an expanding grid with CSS and JavaScript, the code is as follows ?
Three Column grid example
Some text on the left
Some text in center
Some text on the right
727 Views
