---
# System prepended metadata

title: PDI-1209

---

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.