In this step-by-step web development tutorial, learn how to create a responsive expanding card grid with HTML, CSS, and JavaScript. Follow along with code examples and screenshots.
Table of Contents
Are you looking for a way to display content on your website in a visually appealing and interactive way? An expanding card grid might be just what you need! In this tutorial, we will guide you through the process of creating your own interactive expanding card grid using HTML, CSS, and JavaScript.
Expanding card grids are an innovative way to showcase content, particularly when you have a large amount of information that you want to display in a limited amount of space. An expanding card grid allows you to present content in an organized and visually pleasing way, while also allowing users to interact with the content and explore it at their own pace.
This tutorial is designed for beginner to intermediate web developers who want to learn how to create an interactive expanding card grid from scratch. We will take a step-by-step approach, starting with the HTML structure, moving on to styling the card grid with CSS, and finally adding interactivity with JavaScript.
By the end of this tutorial, you will have the skills to create your own interactive card grids using HTML and CSS, and the knowledge to add interactivity with JavaScript.
Let's start making an amazing responsive expanding card grid using HTML, CSS and JavaScript step by step.
Join My Telegram Channel to Download the Projects Source Code: Click Here
Prerequisites:
Before starting this tutorial, you should have a basic understanding of HTML, CSS, and JavaScript. Additionally, you will need a code editor such as Visual Studio Code or Sublime Text to write and save your code.
Code by: Naila Ahmad
Source Code
Step 1 (HTML Code):
Below is an HTML code that defines the structure and styling of a webpage that displays an expanding card grid. The webpage uses the Flexbox layout module to create a responsive grid of cards that can be expanded or collapsed when clicked.
The HTML document starts with the doctype declaration which specifies the version of HTML being used. In this case, it is HTML5. The <html> element contains the entire webpage and specifies the language used on the page using the "lang" attribute set to "en".
The <head> section contains metadata about the page such as the title, character encoding, and viewport settings for mobile devices. It also includes links to external stylesheets that define the visual appearance of the page. In this case, it includes two Google fonts and the Font Awesome library for icons.
The <body> section contains the content of the page. The content is organized into a wrapper div that contains a header and a div for the cards. The header contains a title and a subtitle for the page.
The cards div contains several card elements. Each card element has two child divs: a card__inner div and a card__expander div. The card__inner div contains the content of the card and is visible when the card is collapsed. The card__expander div is hidden by default and contains the expanded content of the card.
Each card element also has a class of "is-collapsed" which is used to toggle the visibility of the card__expander div when the card is clicked. Additionally, each card__inner div has a class of "js-expander" which is used to trigger the toggle function in the script.js file when clicked, and each card__expander div has a class of "js-collapser" which is used to trigger the toggle function when clicked to collapse the card.
Finally, the HTML file includes two scripts: jQuery and script.js. The jQuery library is used to simplify the process of selecting and manipulating HTML elements. The script.js file contains the JavaScript code that defines the toggle function used to expand and collapse the cards when clicked.
Step 2 (CSS Code):
Once the basic HTML structure of the expanding card grid is in place, the next step is to add styling to the expanding card grid using CSS.
Below is a block of CSS code that styles a webpage. Let's break it down:
The first line sets the character encoding to UTF-8, which allows for the use of extended characters and symbols in text.
The next few lines set some global styles for the webpage. The box-sizing: border-box; property tells the browser to include the border and padding of an element in its total width and height, rather than adding them on top of the width and height. This ensures that elements with borders and padding don't overflow their containers. The background property sets the background color of the body element. The font-family property sets the default font for text on the page. The color property sets the default text color.
The .wrapper class styles a container element with a white background and a drop shadow. It has a maximum width of 1000 pixels and is centered on the page using margin: 5em auto;.
The .header class styles a header element with a top padding of 30 pixels and a left and right padding of 30 pixels. The text-align property centers the text within the header. The .header__title and .header__subtitle classes style the main heading and subtitle of the header, respectively.
The .cards class styles a container element for a group of cards. The display: flex; property sets the container to a flex container so that its child elements can be easily aligned. The flex-flow: row wrap; property tells the browser to wrap the cards onto multiple lines if they exceed the width of the container.
The .card class styles individual cards within the .cards container. They have a margin of 15 pixels and a width of one-third of the container width minus 30 pixels. There are also media queries for smaller screen sizes that adjust the width of the cards as needed. The .card:hover .card__inner class styles the inner content of the card when it is hovered over by the mouse. It changes the background color and scales up the content slightly.
The .card__inner class styles the main content of each card. It has a white background and text that is uppercase and centered. The cursor: pointer; property makes the cursor change to a hand when it is over the card, indicating that it is clickable. There is also a pseudo-element after the .card__inner element that creates a triangular shape below the card when it is expanded. This is used to give the appearance of the card opening up when clicked.
The .card__expander class styles the content that is shown when a card is expanded. It has a dark background color and white text. There is also a font icon in the upper right corner that changes to an arrow pointing downwards when the card is expanded. The .card.is-collapsed .card__inner:after and .card.is-collapsed .card__expander classes hide the content of the .card__expander element when the card is collapsed. The .card.is-expanded .card__inner and .card.is-expanded .card__inner:after classes style the card when it is expanded, showing the triangular shape below it and changing the background color of the .card__inner element. The .card.is-expanded .card__expander class sets the height of the .card__expander element to a maximum value and makes it visible.
Finally, there are some media queries that adjust the layout of the cards for different screen sizes. The nth-of-type pseudo-class is used to target specific cards and apply different styles to them based on their position in the layout.
@charset "UTF-8";
* {
box-sizing: border-box;
}
body {
background: #eceef1;
font-family: "Slabo 27px", serif;
color: #333a45;
}
.wrapper {
margin: 5em auto;
max-width: 1000px;
background-color: #fff;
box-shadow: 0 0 5px 0 rgba(0, 0, 0, 0.06);
}
.header {
padding: 30px 30px 0;
text-align: center;
}
.header__title {
margin: 0;
text-transform: uppercase;
font-size: 2.5em;
font-weight: 500;
line-height: 1.1;
}
.header__subtitle {
margin: 0;
font-size: 1.5em;
color: #949fb0;
font-family: "Yesteryear", cursive;
font-weight: 500;
line-height: 1.1;
}
.cards {
padding: 15px;
display: flex;
flex-flow: row wrap;
}
.card {
margin: 15px;
width: calc((100% / 3) - 30px);
transition: all 0.2s ease-in-out;
}
@media screen and (max-width: 991px) {
.card {
width: calc((100% / 2) - 30px);
}
}
@media screen and (max-width: 767px) {
.card {
width: 100%;
}
}
.card:hover .card__inner {
background-color: #1abc9c;
transform: scale(1.05);
}
.card__inner {
width: 100%;
padding: 30px;
position: relative;
cursor: pointer;
background-color: #949fb0;
color: #eceef1;
font-size: 1.5em;
text-transform: uppercase;
text-align: center;
transition: all 0.2s ease-in-out;
}
.card__inner:after {
transition: all 0.3s ease-in-out;
}
.card__inner .fa {
width: 100%;
margin-top: 0.25em;
}
.card__expander {
transition: all 0.2s ease-in-out;
background-color: #333a45;
width: 100%;
position: relative;
display: flex;
justify-content: center;
align-items: center;
text-transform: uppercase;
color: #eceef1;
font-size: 1.5em;
}
.card__expander .fa {
font-size: 0.75em;
position: absolute;
top: 10px;
right: 10px;
cursor: pointer;
}
.card__expander .fa:hover {
opacity: 0.9;
}
.card.is-collapsed .card__inner:after {
content: "";
opacity: 0;
}
.card.is-collapsed .card__expander {
max-height: 0;
min-height: 0;
overflow: hidden;
margin-top: 0;
opacity: 0;
}
.card.is-expanded .card__inner {
background-color: #1abc9c;
}
.card.is-expanded .card__inner:after {
content: "";
opacity: 1;
display: block;
height: 0;
width: 0;
position: absolute;
bottom: -30px;
left: calc(50% - 15px);
border-left: 15px solid transparent;
border-right: 15px solid transparent;
border-bottom: 15px solid #333a45;
}
.card.is-expanded .card__inner .fa:before {
content: "";
}
.card.is-expanded .card__expander {
max-height: 1000px;
min-height: 200px;
overflow: visible;
margin-top: 30px;
opacity: 1;
}
.card.is-expanded:hover .card__inner {
transform: scale(1);
}
.card.is-inactive .card__inner {
pointer-events: none;
opacity: 0.5;
}
.card.is-inactive:hover .card__inner {
background-color: #949fb0;
transform: scale(1);
}
@media screen and (min-width: 992px) {
.card:nth-of-type(3n+2) .card__expander {
margin-left: calc(-100% - 30px);
}
.card:nth-of-type(3n+3) .card__expander {
margin-left: calc(-200% - 60px);
}
.card:nth-of-type(3n+4) {
clear: left;
}
.card__expander {
width: calc(300% + 60px);
}
}
@media screen and (min-width: 768px) and (max-width: 991px) {
.card:nth-of-type(2n+2) .card__expander {
margin-left: calc(-100% - 30px);
}
.card:nth-of-type(2n+3) {
clear: left;
}
.card__expander {
width: calc(200% + 30px);
}
} Step 3 (JavaScript Code):
Finally, we need to create a function that handles the opening and closing of cards in JavaScript.
The function begins by selecting all elements with the class "card" and storing them in a variable named "$cell". The function then adds a click event listener to all elements with the class "js-expander" within a card element. This event listener will be triggered whenever a user clicks on a card.
When the event listener is triggered, the function retrieves the closest parent element with the "card" class and stores it in a variable named "$thisCell". It then checks whether the card is collapsed (has the "is-collapsed" class). If it is, the function collapses all other cards (by adding the "is-collapsed" and "is-inactive" classes to all other cards except for the clicked card) and expands the clicked card (by removing the "is-collapsed" class and adding the "is-expanded" class). If any other cards were previously inactive (i.e. not expanded or collapsed), the function adds the "is-inactive" class to them. If the clicked card is already expanded (i.e. does not have the "is-collapsed" class), the function collapses it and removes the "is-inactive" class from all other cards.
The function then adds another click event listener to all elements with the class "js-collapser" within a card element. This event listener will be triggered whenever a user clicks on the "close" button on a card.
When the event listener is triggered, the function retrieves the closest parent element with the "card" class and stores it in a variable named "$thisCell". It then collapses the clicked card (by removing the "is-expanded" class and adding the "is-collapsed" class) and removes the "is-inactive" class from all other cards.
Create a JavaScript file with the name of script.js and paste the given codes into your JavaScript file and make sure it's linked properly to your HTML document, so that the scripts are executed on the page. Remember, you’ve to create a file with .js extension.
var $cell = $('.card');
//open and close card when clicked on card
$cell.find('.js-expander').click(function() {
var $thisCell = $(this).closest('.card');
if ($thisCell.hasClass('is-collapsed')) {
$cell.not($thisCell).removeClass('is-expanded').addClass('is-collapsed').addClass('is-inactive');
$thisCell.removeClass('is-collapsed').addClass('is-expanded');
if ($cell.not($thisCell).hasClass('is-inactive')) {
//do nothing
} else {
$cell.not($thisCell).addClass('is-inactive');
}
} else {
$thisCell.removeClass('is-expanded').addClass('is-collapsed');
$cell.not($thisCell).removeClass('is-inactive');
}
});
//close card when click on cross
$cell.find('.js-collapser').click(function() {
var $thisCell = $(this).closest('.card');
$thisCell.removeClass('is-expanded').addClass('is-collapsed');
$cell.not($thisCell).removeClass('is-inactive');
});Final Output:
Conclusion:
In this tutorial, we have learned how to create an interactive expanding card grid using HTML, CSS, and JavaScript. We have gone through the step-by-step process of creating the HTML structure, styling the card grid with CSS, and adding interactivity with JavaScript.
An expanding card grid is an excellent way to showcase content on your website in a visually appealing and interactive way. It allows users to explore the content at their own pace, making design elements user-friendly and engaging.
By using the skills and knowledge gained from this tutorial, you can create your own expanding card grid with ease. Remember to experiment with different designs and layouts to find the best fit for your content.
We hope that this tutorial has been helpful in expanding your web development skills and knowledge. Keep practicing and exploring to create innovative and dynamic designs for your website.
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee.
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
