To show four cards below a photo or circle when clicked, we can use Bootstrap's card component. A card is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, contextual background colors, and powerful display options. Bootstrap’s cards provide a flexible and extensible content container with multiple variants and options [1].
We start by setting up the HTML structure:
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<title>Card Display</title>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-4 offset-md-4">
<div class="card text-center">
<img class="card-img-top mx-auto mt-3" src="path/to/photo.jpg" alt="Card image cap" style="width: 150px; height: 150px; object-fit: cover; border-radius: 50%;">
<div class="card-body">
<h5 class="card-title">Click me!</h5>
</div>
<div class="card-footer">
<button type="button" class="btn btn-primary" data-toggle="collapse" data-target="#cardCollapse">Show cards</button>
</div>
</div>
<div class="collapse" id="cardCollapse">
<div class="card-deck mt-3">
<div class="card">
<img class="card-img-top" src="path/to/card1.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card 1</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="path/to/card2.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card 2</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="path/to/card3.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card 3</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
<div class="card">
<img class="card-img-top" src="path/to/card4.jpg" alt="Card image cap">
<div class="card-body">
<h5 class="card-title">Card 4</h5>
<p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.3/dist/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src="your-script.js"></script>
</body>
</html>
```
In this example, we have created a container with a row and a column that centers a card with an image and a button. Now we will create a JavaScript file (your-script.js) to handle the card display:
```javascript
$(document).ready(function() {
// Define an array of card data (you can customize this)
const cardData = [
{
title: "Card 1",
content: "This is the content of Card 1."
},
{
title: "Card 2",
content: "This is the content of Card 2."
},
{
title: "Card 3",
content: "This is the content of Card 3."
},
{
title: "Card 4",
content: "This is the content of Card 4."
}
];
// Function to generate card HTML
function generateCardHTML(card) {
return `
<div class="card">
<div class="card-body">
<h5 class="card-title">${card.title}</h5>
<p class="card-text">${card.content}</p>
</div>
</div>
`;
}
// Handle click on center image
$('#center-image').on('click', function() {
// Clear existing cards
$('#card-container').empty();
// Generate and append cards to the card container
cardData.forEach(function(card) {
$('#card-container').append(generateCardHTML(card));
});
// Show the card container
$('#card-container').removeClass('d-none');
});
// Handle click on the "Show cards" button
$('#cardCollapse').on('show.bs.collapse', function () {
// You can add any logic you need here before showing the cards
console.log("Cards are about to be shown.");
});
// Handle after the "Show cards" button is shown
$('#cardCollapse').on('shown.bs.collapse', function () {
// You can add any logic you need here after the cards are shown
console.log("Cards are now shown.");
});
// Handle click on the "Hide cards" button
$('#cardCollapse').on('hide.bs.collapse', function () {
// You can add any logic you need here before hiding the cards
console.log("Cards are about to be hidden.");
});
// Handle after the "Hide cards" button is hidden
$('#cardCollapse').on('hidden.bs.collapse', function () {
// You can add any logic you need here after the cards are hidden
console.log("Cards are now hidden.");
});
});
```
In this code,
1. We have defined an array named `cardData` to store information related to various cards. This setup allows for easy customization and the addition of new cards as needed.
2. There is a function named `generateCardHTML` that dynamically generates HTML markup for each card. This function takes a card object as its input and constructs the required card structure with dynamic content, including titles and descriptions.
3. When the button is clicked, a collapse element reveals a card deck consisting of four cards. The card deck is centered and contains four cards, each featuring images and text.
4. The core functionality is triggered when a user clicks on an element with the ID `center-image`. Upon clicking, the code clears any existing card content within an element with the ID `card-container`. It then iterates through the `cardData` array, generating HTML for each card using the `generateCardHTML` function, and appends them to the card-container.
5. Finally, it removes the d-none class from the card-container, making it visible to the user.
Sign in with Wallet
Connect another wallet