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
-
Economics & Finance
How to create Expanding Cards using HTML, CSS, and JavaScript
In this tutorial, we will learn how to create Expanding Cards using HTML, CSS and JavaScript. Expanding cards provide an interactive way to display content with smooth animations and enhanced user experience.
What are Expanding Cards?
Expanding cards are interactive UI elements that scale up or reveal additional content when clicked. They are commonly used to display information in a compact format while providing an engaging way to access more details on demand.
HTML Structure
To create expanding cards, we need the following HTML elements:
Card container element: Contains all cards with id "expanding-cards"
Card element: Individual card wrapper with class "card"
Card header element: Contains the card title with class "card-header"
Card body element: Contains main content with class "card-body"
Card footer element: Contains action links with class "card-footer"
CSS Styling
First, let's style the card container:
#expanding-cards {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
Next, we'll style individual cards with smooth transitions:
.card {
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
margin-bottom: 10px;
transition: all 0.3s ease-out;
}
.card.expanded {
transform: scale(1.1);
}
.card:hover {
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
cursor: pointer;
}
Style the card components:
.card-header {
padding: 15px;
background-color: #f5f5f5;
border-bottom: 1px solid #ccc;
}
.card-header h3 {
margin: 0;
font-size: 16px;
}
.card-body {
padding: 15px;
}
.card-body p {
margin: 0;
font-size: 14px;
line-height: 1.5;
}
.card-footer {
padding: 15px;
background-color: #f5f5f5;
border-top: 1px solid #ccc;
}
JavaScript Functionality
Now let's add the JavaScript to make cards interactive. First, select all card elements:
var cards = document.querySelectorAll('.card');
Create a function to toggle the expanded state:
function toggleExpanded() {
this.classList.toggle('expanded');
}
Add click event listeners to all cards:
for(var i = 0; i < cards.length; i++) {
cards[i].addEventListener('click', toggleExpanded);
}
Responsive Design
Add media queries for mobile responsiveness:
@media (max-width: 768px) {
.card {
width: 100%;
}
}
Complete Working Example
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
#expanding-cards {
width: 100%;
max-width: 960px;
margin: 0 auto;
}
.card {
width: 100%;
border: 1px solid #ccc;
border-radius: 4px;
overflow: hidden;
margin-bottom: 10px;
transition: all 0.3s ease-out;
}
.card.expanded {
transform: scale(1.1);
}
.card:hover {
box-shadow: 0px 0px 10px rgba(0,0,0,0.3);
cursor: pointer;
}
.card-header {
padding: 15px;
background-color: #f5f5f5;
border-bottom: 1px solid #ccc;
}
.card-header h3 {
margin: 0;
font-size: 16px;
}
.card-body {
padding: 15px;
}
.card-body p {
margin: 0;
font-size: 14px;
line-height: 1.5;
}
.card-footer {
padding: 15px;
background-color: #f5f5f5;
border-top: 1px solid #ccc;
}
@media (max-width: 768px) {
.card {
width: 100%;
}
}
</style>
</head>
<body>
<div><h3>Click anywhere on the card to see the expanding effect</h3></div>
<div id="expanding-cards">
<div class="card">
<div class="card-header">
<h3>Card 1</h3>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum.</p>
</div>
<div class="card-footer">
<a href="#">Read More</a>
</div>
</div>
<div class="card">
<div class="card-header">
<h3>Card 2</h3>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum.</p>
</div>
<div class="card-footer">
<a href="#">Read More</a>
</div>
</div>
<div class="card">
<div class="card-header">
<h3>Card 3</h3>
</div>
<div class="card-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum.</p>
</div>
<div class="card-footer">
<a href="#">Read More</a>
</div>
</div>
</div>
<script>
var cards = document.querySelectorAll('.card');
function toggleExpanded() {
this.classList.toggle('expanded');
}
for(var i = 0; i < cards.length; i++) {
cards[i].addEventListener('click', toggleExpanded);
}
</script>
</body>
</html>
Key Features
Smooth Transitions: CSS transitions provide smooth scaling animations
Interactive Hover: Cards show shadow effects on hover for better UX
Responsive Design: Cards adapt to different screen sizes
Toggle Functionality: Click to expand/collapse cards dynamically
Conclusion
Expanding cards combine HTML structure, CSS transitions, and JavaScript interactivity to create engaging UI components. The scale transformation and smooth transitions provide an excellent user experience for displaying expandable content.
3K+ Views
