GiorgeLucas
commented
1 year ago Equipe Vikings
Resultado
HTML
<!DOCTYPE html>
<html lang="en">
<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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<title>Collapse</title>
</head>
<body>
<div class="container">
<div class="collapsible">
<div class="top">
<h2>Qual é a capital da França?</h2>
<i class="seta fa fa-chevron-down"></i>
</div>
<div class="content">
Paris.
</div>
</div>
<div class="collapsible">
<div class="top">
<h2>Qual é o nome da maior montanha do mundo?</h2>
<i class="seta fa fa-chevron-down"></i>
</div>
<div class="content">
Monte Everest.
</div>
</div>
<div class="collapsible">
<div class="top">
<h2>Quem foi o primeiro presidente do Brasil?</h2>
<i class="seta fa fa-chevron-down"></i>
</div>
<div class="content">
Deodoro da Fonseca.
</div>
</div>
<div class="collapsible">
<div class="top">
<h2>Qual é o elemento químico com símbolo Hg?</h2>
<i class="seta fa fa-chevron-down"></i>
</div>
<div class="content">
Mercúrio.
</div>
</div>
<div class="collapsible">
<div class="top">
<h2>Em que ano a Primeira Guerra Mundial começou?</h2>
<i class="seta fa fa-chevron-down"></i>
</div>
<div class="content">
1914.
</div>
</div>
</div>
<script>
var collapsibles = document.querySelectorAll(".seta");
for (var i = 0; i < collapsibles.length; i++) {
collapsibles[i].addEventListener("click", function () {
this.classList.toggle("active");
var content = this.parentNode.nextElementSibling;
if (content.style.display === "block") {
content.style.display = "none";
} else {
content.style.display = "block";
}
});
}
</script>
</body>
</html>CSS
*{
font-family: Arial, Helvetica, sans-serif;
color: black;
}
.container{
display: flex;
flex-direction: column;
}
.collapsible {
margin-bottom: 1rem;
border: 1px solid #ddd;
border-radius: 20px;
overflow: hidden;
width: 40%;
}
.collapsible .top{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
}
.collapsible h2 {
margin: 0;
padding: 1rem;
font-size: 1rem;
font-weight: bold;
cursor: pointer;
}
.collapsible i {
float: right;
font-size: 1.2rem;
cursor: pointer;
padding-right: 15px;
}
.collapsible .content {
padding: 2rem 1rem ;
display: none;
transition: max-height 0.5s ease-out;
max-height: 0;
overflow: hidden;
}
.seta .content {
max-height: 500px;
}
.collapsible.active{
box-shadow: rgba(17, 17, 26, 0.1) 0px 0px 16px;
background-color: white;
}
iurygdeoliveira
Contact Details
iury.oliveira@ifto.edu.br
Challenge Description
Olá crianças inocentes da programação! Hoje trago um desafio incrível para vocês: criar um efeito de collapse com CSS!
Mas calma, não se assustem! O desafio não é tão difícil quanto parece. O objetivo é criar um layout que contenha alguns elementos que possam ser "recolhidos" ao clicar em um ícone de seta para baixo. E quando o elemento é recolhido, ele fica "escondido", ou seja, "collapsed".
Então, estão prontos para esse desafio incrível? Vamos lá, jovens padawans! Que a força esteja com vocês!
Exemplo:
Additional tips
Mas aqui vai a dica mais importante: utilize a lib font awesome para facilitar a criação dos ícones. Além disso, lembre-se de utilizar o poder do CSS para animar o efeito de collapse. Ah, e não se esqueça de testar bastante o seu código para garantir que está funcionando corretamente.