• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript How to build interactive boxes in grid with dropdown content

</mitch>

New Coder
Hi Everyone,

i'm a web developer apprentice that is trying to replicate for a project this grid of boxes with related content, https://www.ibm.com/cloud/products, but i'm having trouble to find a tutorial or a documentation too about this kind of solution. Do you have any suggestion where i could find another similar job to learn this function?
Until now i learned how to make a card with a toggle function but it's not exactly the goal i need, here the result i got until now https://gf-deployment.it/test/index.html.
Here the code:
HTML:
<!DOCTYPE html>
<html>
<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"/>
    <link rel="stylesheet" href="style.css"/>
<title>Test</title>
</head>
<body>
    <div class="card">
        <div class="content">
            <div class="profile">
                <img src="img/icona_smartsafety.png"/>
            </div>
            <h3>SMART SAFETY</h3>
        </div>
        <ul class="nav">
            <li>
                <a href="#">
                    Man Down
                </a>
            </li>
            <li>
                <a href="#">
                    Man Down
                </a>
            </li>
            <li>
                <a href="#">
                    Man Down
                </a>
            </li>
        </ul>
        <div class="toggle">
            <ion-icon name="chevron-down-outline"></ion-icon>
        </div>
    </div>

    <br><br><br><br>

    <div class="iot-solutions">
        <div class="box">
            <div class="selected">
                <div>
                <img class="icon" aria-hidden="true" src="img/icona_smartsafety.png"/>
                </div>
                <div class="titolo-chevron">
                    <h4 class="H4">SMART SAFETY</h4>
                    <div class="chevron">
                        <ion-icon name="chevron-down-outline"></ion-icon>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-box" style="grid-row-start: 2;">
            <div class="title-row">
                <div class="title-row-content">
                    <h2 class="H2">SMART SAFETY</h2>
                    <div class="text-link">
                        <p class="css-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        <a href="#" class="solution-link">See more</a>
                    </div>
                </div>
            </div>
            <div class="use-cases">
                <a href="#" class="use-cases-link">Lorem Ipsum</a>
                <p class="css-cases">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, nostrum! Perferendis nihil facilis deserunt!</p>
            </div>
        </div>

        <div class="box">
            <div class="selected">
                <div>
                <img class="icon" aria-hidden="true" src="img/icona_smartsafety.png"/>
                </div>
                <div class="titolo-chevron">
                    <h4 class="H4">SMART SAFETY</h4>
                    <div class="chevron">
                        <ion-icon name="chevron-down-outline"></ion-icon>
                    </div>
                </div>
            </div>
        </div>

        <div class="box">
            <div class="selected">
                <div>
                <img class="icon" aria-hidden="true" src="img/icona_smartsafety.png"/>
                </div>
                <div class="titolo-chevron">
                    <h4 class="H4">SMART SAFETY</h4>
                    <span class="chevron">
                        <ion-icon name="chevron-down-outline"></ion-icon>
                    </span>
                </div>
            </div>
        </div>

        <div class="box">
            <div class="selected">
                <div>
                <img class="icon" aria-hidden="true" src="img/icona_smartsafety.png"/>
                </div>
                <div class="titolo-chevron">
                    <h4 class="H4">SMART SAFETY</h4>
                    <span class="chevron">
                        <ion-icon name="chevron-down-outline"></ion-icon>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
    <script>
    const card = document.querySelector(".card");
    const cardtoggle = document.querySelector(".toggle");
    cardtoggle.onclick = function () {
        card.classList.toggle("active");
    };
    </script>
</body>
</html>

Thanks in advance!
 

Johna

King Coder
Staff Team
Guardian
Hi Everyone,

i'm a web developer apprentice that is trying to replicate for a project this grid of boxes with related content, https://www.ibm.com/cloud/products, but i'm having trouble to find a tutorial or a documentation too about this kind of solution. Do you have any suggestion where i could find another similar job to learn this function?
Until now i learned how to make a card with a toggle function but it's not exactly the goal i need, here the result i got until now https://gf-deployment.it/test/index.html.
Here the code:
HTML:
<!DOCTYPE html>
<html>
<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"/>
    <link rel="stylesheet" href="style.css"/>
<title>Test</title>
</head>
<body>
    <div class="card">
        <div class="content">
            <div class="profile">
                <img src="img/icona_smartsafety.png"/>
            </div>
            <h3>SMART SAFETY</h3>
        </div>
        <ul class="nav">
            <li>
                <a href="#">
                    Man Down
                </a>
            </li>
            <li>
                <a href="#">
                    Man Down
                </a>
            </li>
            <li>
                <a href="#">
                    Man Down
                </a>
            </li>
        </ul>
        <div class="toggle">
            <ion-icon name="chevron-down-outline"></ion-icon>
        </div>
    </div>

    <br><br><br><br>

    <div class="iot-solutions">
        <div class="box">
            <div class="selected">
                <div>
                <img class="icon" aria-hidden="true" src="img/icona_smartsafety.png"/>
                </div>
                <div class="titolo-chevron">
                    <h4 class="H4">SMART SAFETY</h4>
                    <div class="chevron">
                        <ion-icon name="chevron-down-outline"></ion-icon>
                    </div>
                </div>
            </div>
        </div>
        <div class="content-box" style="grid-row-start: 2;">
            <div class="title-row">
                <div class="title-row-content">
                    <h2 class="H2">SMART SAFETY</h2>
                    <div class="text-link">
                        <p class="css-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        <a href="#" class="solution-link">See more</a>
                    </div>
                </div>
            </div>
            <div class="use-cases">
                <a href="#" class="use-cases-link">Lorem Ipsum</a>
                <p class="css-cases">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, nostrum! Perferendis nihil facilis deserunt!</p>
            </div>
        </div>

        <div class="box">
            <div class="selected">
                <div>
                <img class="icon" aria-hidden="true" src="img/icona_smartsafety.png"/>
                </div>
                <div class="titolo-chevron">
                    <h4 class="H4">SMART SAFETY</h4>
                    <div class="chevron">
                        <ion-icon name="chevron-down-outline"></ion-icon>
                    </div>
                </div>
            </div>
        </div>

        <div class="box">
            <div class="selected">
                <div>
                <img class="icon" aria-hidden="true" src="img/icona_smartsafety.png"/>
                </div>
                <div class="titolo-chevron">
                    <h4 class="H4">SMART SAFETY</h4>
                    <span class="chevron">
                        <ion-icon name="chevron-down-outline"></ion-icon>
                    </span>
                </div>
            </div>
        </div>

        <div class="box">
            <div class="selected">
                <div>
                <img class="icon" aria-hidden="true" src="img/icona_smartsafety.png"/>
                </div>
                <div class="titolo-chevron">
                    <h4 class="H4">SMART SAFETY</h4>
                    <span class="chevron">
                        <ion-icon name="chevron-down-outline"></ion-icon>
                    </span>
                </div>
            </div>
        </div>
    </div>
    <script type="module" src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.esm.js"></script>
    <script nomodule src="https://unpkg.com/[email protected]/dist/ionicons/ionicons.js"></script>
    <script>
    const card = document.querySelector(".card");
    const cardtoggle = document.querySelector(".toggle");
    cardtoggle.onclick = function () {
        card.classList.toggle("active");
    };
    </script>
</body>
</html>

Thanks in advance!
I don't understand what exactly you're trying to do.
 

</mitch>

New Coder
I don't understand what exactly you're trying to do.
I Johna, i'm trying to replicate the boxes menu in this link https://www.ibm.com/cloud/products (i attached also a screen),
but i can't find anywhere suggestions of how build the Javascript function to make content collapse under of each box after click.
The test i shared has only the first card working but what i want exactly is have the others 4 collapse at turn by click with the content large like all the grid.
This is the part of the subcontent i builded until now that i want to show after click for the first box of the 4 for example:
HTML:
<div class="content-box" style="grid-row-start: 2;">
            <div class="title-row">
                <div class="title-row-content">
                    <h2 class="H2">SMART SAFETY</h2>
                    <div class="text-link">
                        <p class="css-text">Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
                        <a href="#" class="solution-link">See more</a>
                    </div>
                </div>
            </div>
            <div class="use-cases">
                <a href="#" class="use-cases-link">Lorem Ipsum</a>
                <p class="css-cases">Lorem ipsum dolor sit amet consectetur adipisicing elit. Molestias, nostrum! Perferendis nihil facilis deserunt!</p>
            </div>
 

Attachments

  • IBM box menu.png
    IBM box menu.png
    402.1 KB · Views: 0

</mitch>

New Coder
Can you also please add the CSS.
I think it'll be easier for me to work on it with the styling.
Of course!

CSS:
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: Montserrat;
}
body {
    display: block;
    justify-content: center;
    align-items: flex-start;
    min-height: 300vh;
    background: cornsilk;
    padding: 6%;
}
a {
    color: #fbb03b;
    transition: .3s color;
    text-decoration: none;
    font-weight: 400;
}
.iot-solutions {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    font-size: 1rem;
    margin: 0;
    padding: 0;
    border: 0;
    vertical-align: baseline;
    box-sizing: inherit;
}
.box {
    padding: 1px;
    cursor: pointer;
    box-sizing: inherit;
}
.selected {
    color: rgb(255, 255, 255);
    height: 156px;
    padding: 1rem;
    background-color: #0070ba;
    display: flex;
    flex-direction: column;
    -webkit-box-pack: justify;
    justify-content: space-between;
    transition: background-color 0.25s ease 0s;
}
.selected.active {
    background-color: #323232;
    color: #fff;
}
.selected img.icon {
    height: 50px;
    width: 50px;
    transition: height 0.25s ease 0s;
}
.titolo-chevron {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: normal;
    align-items: normal;
    -webkit-box-pack: justify;
    justify-content: space-between;
    width: 100%;
}
.H4 {
    font-size: 1.5rem;
    padding: 0px;
    line-height: 1.625rem;
    font-weight: 400;
}
.chevron {
    display: inline-block;
    cursor: pointer;
    position: relative;
    padding-left: 2.1em!important;
}
.content-box {
    background-color: rgb(255, 255, 255);
    color: #323232;
    grid-column: 1 / -1;
        /*grid-column-start: 1;
        grid-column-end: -1;*/
    padding: 16px;
    margin: -1px 1px 1px;
    display: none;
    grid-template-columns: repeat(3, 1fr);
    font-weight: 400;
}
.title-row {
    grid-column: 1 / -1;
        /*grid-column-start: 1;
        grid-column-end: -1;*/
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}
.H2 {
    font-size: 1.75rem;
    padding-bottom: 0.25rem;
    line-height: 1.625rem;
    font-weight: 600;
    padding: 0 0 15px;
    color: #fbb03b;
}
.text-link {
    margin-bottom: 32px;
    font-size: 1rem;
    color: #fff;
}
.css-text {
    padding: 0px;
    font-size: 0.875rem;
    margin: 8px 0px;
    line-height: 1.625rem;
    vertical-align: baseline;
}
.solution-link {
    font-size: 0.875rem;
}
.use-cases {
    padding: 1rem 1rem 1rem 0px;
    color: #fff;
}
.css-cases {
    margin-top: 8px;
    font-size: 0.875rem;
}
.use-cases-link {
    font-size: 1rem;
}


.card {
    position: relative;
    width: 350px;
    height: 120px;
    overflow: hidden;
    background: #0070ba;
    padding: 20px;
    margin: 1px;
    transition: height 0.25s;
}
.card.active {
    height: 300px;
    background: #323232;
}
.card .content {
    display: flex;
    align-items: center;
}
.card .content .profile{
    position: relative;
    width: 75px;
    height: 75px;
    overflow: hidden;
}
.card .content .profile img {
    position: absolute;
    top: 15%;
    left: 15%;
    height: auto;
    width: 70%;
    object-fit: cover;
}
.card.active .content .profile img {
    position: absolute;
    top: 0;
    left: 0;
    height: auto;
    width: 100%;
    object-fit: cover;
}
.card .content h3 {
    margin-left: 15px;
    font-size: 20px;
    font-weight: 300;
    letter-spacing: -0.7;
    color: #fff;
}
.card.active .content h3 {
    visibility: hidden;
}
.nav {
    position: relative;
    top: 25px;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    padding: 20px 0;
}
.nav li {
    list-style: none;
    margin: 15px;
}
.nav li a {
    text-decoration: none;
    display: flex;
    align-items: center;
    color: #fbb03b;
    font-size: 1.1em;
    transition: color 0.25s;
}
.toggle {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}
.toggle ion-icon {
    color: #fff;
    font-size: 1.4em;
    transition: transform easy-in-out 0.5s;
}
.card.active .toggle ion-icon {
    transform: rotate(-180deg);
}
 

Top