Hi Everyone,
i’m a web developer apprentice that is trying to replicate for a project interactive tabs with related content like in this LINK, but i’m having trouble to find tutorials or documentations about this kind of solution. Do you have any suggestions or links 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 result i need (here the test i’m doing until now Test), what i need exactly is have the others 4 collapse at turn by click with the content large like all the grid as it’s in the first link above.
Here the code:
<!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/ionicons@5.5.2/dist/ionicons/ionicons.esm.js"></script>
<script nomodule src="https://unpkg.com/ionicons@5.5.2/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>
This is the part i need to show with the interaction
<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>
Thanks in advance!
