I have a question,
As you can see in the image, this is a part of a site that the client requested. How can I make this menu where you click and it expands and shows the hidden text? And you still have that sliding effect?
I'm going to need to do this same effect even for mobile versions. If I need to, I'll put the code I've already done. Just so you know, I have not yet made the circle nor put this triangle in the project yet.
I think this fits more or less what you need
$(function (){
$("body").ready(function(){
$(".sessao").click(function(){
if($(this).hasClass("expandir")){
$(this).removeClass("expandir");
}else{
$(this).addClass("expandir");
}
});
});
});body{
margin: 0;
font-family: "arial";
}
.sessao{
height: 60px;
width: 100%;
position: relative;
cursor: pointer;
transition: all 1s ease-in-out;
}
.sessao:before{
content: "";
height: 30px; width: 30px;
position: absolute;
background-color: inherit;
border-bottom-left-radius: 100%;
top: 100%;
left: calc(50% - 30px);
z-index: 1;
cursor: inherit;
}
.sessao:after{
content: "";
height: 30px; width: 30px;
position: absolute;
background-color: inherit;
border-bottom-right-radius: 100%;
top: 100%;
left: 50%;
z-index: 1;
cursor: inherit;
}
.titulo{
font-size: 30px;
color: white;
width: 100%;
text-align: center;
position: absolute;
bottom: 0;
opacity: 1;
transition: all 1s ease-in-out;
}
.expandir{
height: 500px;
}
.expandir .conteudo{
display: block;
opacity: 1;
}
.expandir .titulo{
opacity: 0;
}
.conteudo{
opacity: 0;
transition: all 1s ease-in-out;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><divclass="sessao" style="background-color: red;">
<div class="titulo">teste</div>
<div class="conteudo">teste bla bla lba</div>
</div>
<div class="sessao" style="background-color: green;">
<div class="titulo">teste</div>
<div class="conteudo">teste bla bla lba</div>
</div>
<div class="sessao" style="background-color: blue;">
<div class="titulo">teste</div>
<div class="conteudo">teste bla bla lba</div>
</div> Here's an option with CSS only. This answer only contains some elements and styles that can help you. You need to see how best to adapt your content within collapses so they do not extrapolate the boundaries of the container
I used a CSS rule that uses a hidden chackbox tect, which when checked by clicking on the arrow that is actually a label you change the height of div . The effect of it increasing and collecting and done with transition
As I said, it's just an example that sometimes you can enjoy the idea.
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.pai {
display: flex;
flex-wrap: wrap;
}
.pai .filhos {
width: 100%;
position: relative;
height: 50px;
transition: all 500ms ease;
}
.pai .filhos label {
position: absolute;
width: 50px;
height: 50px;
bottom: -25px;
left: 50%;
transform: translateX(-50%);
border-radius: 50%;
z-index: 1;
cursor: pointer;
}
.pai .filhos label::before {
content: "";
position: absolute;
width: 0px;
height: 0px;
border: 15px solid transparent;
border-bottom-width: 15px;
border-bottom-color: #fff;
border-bottom-style: solid;
bottom: 0px;
left: 50%;
transform: translateX(-50%) scaleY(-1);
z-index: 2;
transition: all 300ms;
}
#id1:checked + div > label::before, #id2:checked + div > label::before, #id3:checked + div > label::before {
bottom: 15px;
transform: translateX(-50%) scaleY(1);
}
/* aqui vc controla a altura que a div vai ter quando aberta */
#id1:checked + div, #id2:checked + div, #id3:checked + div {
height: 100px;
}
.filho1, .filho1 label {
background-color: #f00;
z-index: 3;
}
.filho2, .filho2 label {
background-color: #0f0;
z-index: 2;
}
.filho3, .filho3 label {
background-color: #00f;
z-index: 1;
}
.pai > input[type="checkbox"] {
display: none;
}
<div class="pai">
<input type="checkbox" checked name="" id="id1">
<div class="filhos filho1">
123
<label for="id1"></label>
</div>
<input type="checkbox" checked name="" id="id2">
<div class="filhos filho2">
456
<label for="id2"></label>
</div>
<input type="checkbox" checked name="" id="id3">
<div class="filhos filho3">
789
<label for="id3"></label>
</div>
</div>For those interested, I'm putting here the CSS code, followed by the HTML for that part:
div.bloco4{ /* div que envolve a quarta parte do site */
background-color: #fff;
font-family: 'Roboto', sans-serif;
color: #fff;
font-size: 16px;
font-weight: 100;
text-align: center;
}
div.parte1, .parte2, .parte3, h2{ /* personalização geral do h2 das 3 divs dentro do bloco 4 */
font-family: 'Reem Kufi', sans-serif;
color: #fff;
font-size: 26px;
font-weight: 200;
text-align: center;
}
div.parte1, .parte2, .parte3, p{ /* personalização geral do p das 3 divs dentro do bloco 4 */
font-family: 'Roboto', sans-serif;
color: #fff;
font-size: 16px;
font-weight: 200;
text-align: center;
}
div.parte1{ /* personalização da primeira div do bloco 4 */
background-color: rgb(245, 156, 47);
font-family: 'Roboto', sans-serif;
padding-top: 1;
padding-bottom: 1px;
}
div.fund1{ /* configuração para a div 1 flutuar na parte esquerda do site */
float: left;
width: 40%;
}
div.parte1 p#textofund1{ /* personalização do p do primeiro texto da div 1 */
padding-left: 10%;
padding-right: 10%;
padding-top: 10px;
padding-bottom: 10px;
}
div.parte1 p#texto-coluna1{ /* personalização do p da coluna da esquerda da div 1 */
padding-left: 30%;
text-align: left;
width: 70%;
}
div.lado p#texto-coluna2{ /* personalização do p da coluna à direita da div 1 */
width: 30%;
text-align: left;
display: inline-block;
padding-left: 10%;
padding-bottom: 10%;
}
div.parte2{ /* personalização da segunda div do bloco 4 */
background-color: rgb(240, 74, 51);
font-family: 'Roboto', sans-serif;
padding-top: 1px;
padding-bottom: 1px;
}
div.fund2{ /* configuração para a div 2 flutuar na parte esquerda do site */
float:left;
width: 40%;
}
div.parte2 p#textofund2{ /* personalização do p do primeiro texto da div 2 */
padding-left: 10%;
padding-right: 10%;
padding-top: 10px;
padding-bottom: 10px;
}
div.parte2 p#texto-coluna3{ /* personalização do p da coluna da esquerda da div 2 */
padding-left: 30%;
text-align: left;
width: 70%;
}
div.parte2 p#texto-coluna4{ /* personalização do p da coluna à direita da div 2 */
text-align: left;
display: inline-block;
padding-left: 10%;
}
div.parte3{ /* personalização da terceira div do bloco 4 */
background-color: rgb(03, 163, 87);
font-family: 'Roboto', sans-serif;
padding-top: 1;
padding-bottom: 1px;
}
div.parte3 p#texto-ensmedio{ /* personalização do p do primeiro texto da div 2 */
padding-left: 10%;
padding-right: 10%;
padding-top: 10px;
padding-bottom: 10px;
}
div.parte3 p#texto-coluna5{ /* personalização do p da coluna da esquerda da div 2 */
padding-left: 30%;
text-align: left;
width: 70%;
}
div.parte3 p#texto-coluna6{ /* personalização do p da coluna à direita da div 2 */
text-align: left;
display: inline-block;
padding-left: 10%;
} <div class="bloco4" id="bloco4">
<div class="parte1">
<h2>FUNTAMENTAL I</h2>
<p id="textofund1">Nesta etapa, os estudantes do 1º ano ao 5º ano vão experimentar
o maior número de ferramentas e formas de aprendizagem para descobrirem suas
aptidões e preferências.
</p>
<div class="fund1">
<p id="texto-coluna1">
<font style='font-weight:bold;'>PERÍODO ACADÊMICO</font> <br> (7h20 às 13h00) <br>
<br>Máximo de 15 estudantes por sala
<br>Educação bilíngüe [logo YouZ]
<br>Avaliações multifocais
<br>Espaços de aprendizagem
<br>Vivências cooperativas
<br>Projetos pedagógicos <br><br>
<font style='font-weight:bold;'>Currículo</font>
<br>Práticas de autoconhecimento
<br>Educação financeira
<br>Língua Portuguesa
<br>Produção de texto
<br>Matemática
<br>Inglês
<br>Ciências
<br>História
<br>Geografia
<br>Educação Física
<br>Arte
<br>Filosofia
<br>
</p>
</div>
<div class="lado">
<p id="texto-coluna2">
<font style='font-weight:bold;'> PERÍODO AMPLIADO </font> <br> (13h00 às 19h00)<br>
O Período Ampliado concentra atividades divididas em três bases temáticas: <br><br>
<font style='font-weight:bold;'>EXPRESSÃO E CRIATIVIDADE </font>
<br>Criatividade
<br>Teatro
<br>Artes plásticas
<br>Oratória
<br><br>
<font style='font-weight:bold;'>CORPO E MOVIMENTO </font>
<br>Práticas desportivas
<br>Artes marciais
<br>Dança
<br>Jogos/Brincar
<br><br>
<font style='font-weight:bold;'>VIDA SAUDÁVEL </font>
<br>Práticas meditativas
<br>Sustentabilidade
<br>Bem-estar
<br>Nutrição
<br>
</p>
</div>
</div>
<div class="parte2">
<h2>FUNDAMENTAL II</h2>
<p id="textofund2">Nesta etapa, os estudantes do 6º ano ao 9º ano vão explorar conteúdos
acadêmicos e alternativos para ampliar sua bagagem de conhecimentos múltiplos.
</p>
<div class="fund2">
<p id="texto-coluna3">
<font style='font-weight:bold;'>PERÍODO ACADÊMICO</font> <br> (7h00 às 12h40) <br>
<br> Máximo de 20 estudantes por sala
<br> Ênfase no estudo de idiomas
<br> Avaliações multifocais
<br> Espaços de aprendizagem
<br> Vivências cooperativas
<br> Projetos de empreendedorismo
<br>
</p>
</div>
<div class="lado2">
<p id="texto-coluna4">
<font style='font-weight:bold;'>Currículo</font>
<br>Língua Portuguesa
<br>Produção de texto
<br>Matemática
<br>Educação financeira
<br>Ciências
<br>História
<br>Geografia
<br>Arte
<br>Educação Física
<br>Inglês
<br>Espanhol
<br>Mandarim
<br>Iniciação à Física Quântica
<br>Filosofia
</p>
</div>
</div>
<div class="parte3">
<h2>ENSINO MÉDIO</h2>
<p id="texto-ensmedio">
Nesta etapa, os estudantes da 1ª à 3ª série do Ensino Médio vão aprofundar
os conteúdos de acordo com o Exame Nacional do Ensino Médio (Enem).
</p>
<div class"primeira parte">
<p id="texto-coluna5">
<font style='font-weight:bold;'>PERÍODO ACADÊMICO </font> <br> (7h00 às 12h40 – 3 dias da semana) <br> (7h00 às 17h40 – 2 dias da semana) <br>
<br>Máximo de 25 estudantes por sala
<br>Projeto de vida
<br>Empreendedorismo
<br>Espaços de aprendizagem
<br>Vivências cooperativas
<br>
</p>
</div>
<div class"segunda-parte">
<p id="texto-coluna6">
<font style='font-weight:bold;'>Currículo</font>
<br>Linguagens e Códigos
<br>Literatura
<br>Gramática
<br>Produção de Texto
<br>Arte
<br>Educação Física
<br>
<font style='font-weight:bold;'>Ciências da Natureza e Matemática</font>
<br>Geometria
<br>Álgebra
<br>Educação Financeira
<br>Biologia
<br>Física
<br>Física Quântica
<br>Química
<br>
<font style='font-weight:bold;'>Ciências Humanas</font>
<br>História
<br>Geografia
<br>Filosofia
<br>Sociologia
<br>
<font style='font-weight:bold;'>Línguas estrangeiras</font>
<br>Inglês
<br>Espanhol
<br>Mandarim
<br>
</p>
</div>
</div>
</div>