In this article, I will show you how to create a toggle to display items in a grid from a list. We’ll do this using basic JavaScript skills with no external code or libraries. We will be using Flexbox to help us accomplish this.
What We Will Be Creating
Here’s a demo of what we’ll be creating:
How to Create Our Starter Files
Let’s start by creating three files called index.html
, style.css
, and app.js
. In your index.html
file add the following starter code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Grid List Toggle</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="app.js"></script>
</body>
</html>
In the style.css
file, add the following starter code:
body{
padding: 0;
margin: 0;
height: 100vh;
background-color: azure;
}
For now, we will leave the app.js
file blank. We will put in the code later.
How to Add Our Toggle Buttons
The first thing we want to do is to create two buttons. These two buttons will have the titles Grid
and List
, respectively. When clicked, these buttons will change the layout of the cards on the screen.
The entire content of the page will be placed inside a div with a class of container
. The two buttons will be placed inside a div with a class of buttons
. Each button will have a class of btn
. Each button will have a unique id assigned to it. Later on we will use this id to handle when the button is clicked.
Add the following code inside the body
tag in your index.html
file:
<div class="container">
<div class="buttons">
<button class="btn" id="gridBtn">Grid</button>
<button class="btn" id="listBtn">List</button>
</div>
</div>
How to Style Our Container and Buttons
Everything we display is wrapped inside a div with a class of container
. We want this container to have a specified width that is centered on the screen.
Add this code to your style.css
file:
.container {
width: 90vw;
max-width: 800px;
margin: 50px auto;
}
Next, we want our two buttons to be centered on the screen. The buttons are wrapped by a div with a class of buttons
. This class will use Flexbox to center the buttons.
We want these two buttons to have a blue background with white text. To make them look like they are lifted off the page, we will add a box shadow.
Add the following code to your style.css
file:
.btn {
height: 55px;
background: #2364d2;
color: white;
padding: 10px 20px;
margin-right: 20px;
border: none;
border-radius: 5px;
font-size: 22px;
font-weight: 500;
font-family: "Source Sans Pro", sans-serif;
box-shadow: 3px 10px 20px 0px rgba(35, 100, 210, 0.3);
}
This is what our buttons look like:
How to Add the Cards
I want to add 6 cards that will be displayed. Each card will have a title and a paragraph of Lorem Ipsum text.
I want all of the cards to be contained within a div. The styling on this div will determine if the cards are displayed in a grid or in a list. I will add both an id and a class to this div.
Each card is wrapped by a div with a class of card
. It will have a title and a paragraph of text. Since each card will be the same, once I have created one card, I can copy and paste it to create a total of 6 cards.
Add this code to your index.html
file:
<div id="card-wrapper" class="list">
<div class="card">
<h3>Title</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin non felis euismod lectus convallis interdum eget eu eros.</p>
</div>
</div>
How to Add Styling to Our Cards
We will not add much styling to the card. We will give each card a border and some padding so that the text is not next to the border. We will also add a margin below each card.
Add the following code to your style.css
file:
.card {
border: 1px solid black;
padding: 10px;
background: white;
margin-bottom: 20px;
}
This is what our card looks like:
In your index.html
file copy the code for the single card and paste it so there are a total of 6 cards.
How to Style our Grid and List
The style for the list will be easy to create because we are using the default style for a div. We want each card to be on a line by itself.
Add the following code to your style.css
file:
.list {
display: block;
}
To create our grid we will use Flexbox. Add the following code to your style.css
file:
.grid {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
}
Now if you change the class in the card-wrapper
div to be grid
, you might expect our cards to be a grid. In fact, that does not happen. The reason is that each card is a div, and by default, a div will take up all the space on a row. We need to be able to tell each card to take up a specified percentage of the screen.
We have 6 cards. In grid mode, I want to have 2 rows with 3 cards each. You might think you can set each card to have a width of 33%. That would work, but each card would be right next to the other.
Instead, I want to set each card to have a width of 30%. With 3 cards that would take up 90% of the width of the container. The extra 10% can be padding between each card.
To do this, add this one line to the .card
class style in the style.css
file:
flex: 0 1 30%;
This is what our grid looks like now:
How to Toggle between Grid and List When Clicking a Button
Now we will add our JavaScript code. At a high level, what we want to do is create a variable that points to each button. We will add a click
event listener to the buttons.
When either button is clicked, it will call a function. This function will programmatically change the class assigned to the div with an id of card-wrapper
. When the Grid button is clicked the class will be grid
. Likewise when the List button is clicked, the class will be list
.
Add the following code to your app.js
file:
const gridBtn = document.getElementById('gridBtn');
const listBtn = document.getElementById('listBtn');
Now that we have our variable for each button we need to add an event listener to handle when the button is clicked. For now, I am going to call the two functions clickGrid
and clickList
.
Add the following code to your app.js
file:
gridBtn.addEventListener('click', clickButton);
listBtn.addEventListener('click', clickButton);
Next, we need to create our clickButton
function. The function will remove the current class assigned to the card-wrapper
div. Then it will add a class that corresponds to which button was clicked.
Since we are calling the same function when either button is clicked, how will we determine which button was actually clicked? The simple answer is that the function will be passed a parameter called event
. We can use this to get the id of the button.
The id of the grid button is gridBtn
and the id of the list button is listBtn
. Those correspond almost to the name of our class we will provide to the card-wrapper
div. We need to get the id and remove the Btn
part of the title.
Add the following code to your app.js
file:
function clickButton(event) {
e.preventDefault();
let newStyle = event.target.id;
newStyle = newStyle.replace('Btn', '');
}
This gives us part of the functionality we need. The next step is to assign the class to the card-wrapper
div.
For simplicity, I do not know what class is currently assigned to this div. For that reason, I am going to remove both classes. If the class is present it will be removed. For the other class that is not present, it will do nothing. Then I will add a class that corresponds to which button was clicked using the newStyle
variable we have already created.
Add the following code to your clickButton
function in the app.js
file.
Final Result
Now when you view the code in your browser, you will see the layout change as your click each of the buttons.
Here is what it looks like:
Let’s Connect
Thanks for reading my article today. You can get the source code here.
If you like my content, please consider buying me a coffee ☕.