How to make hidden texts appear when expanding a menu

Asked

Viewed 685 times

0

have a question, inserir a descrição da imagem aqui

As you can see in the image, this is a part of a website that the customer requested. How can I make this menu where you click and it expands and shows hidden text? And it still has that slider effect?

I will need to do this same effect even for cell versions. If you need me, I’ll put in the code I already did. Just so you know, I haven’t even made the circle or put this triangle in the project yet.

javascript css menu

  • you use javascript/jquery?

  • I don’t know how to use it. I’ve never used Tb. My code is purely in HTML, CSS and PHP

  • Enrico put what you already have of code that makes it easy to give you an answer that will be useful for you. You want the person to be able to open all the texts if you want, or you want them to be able to open one at a time, like if you open one you have to close the other?

  • Look if you want to use Jquery it is easy to do this, see this example on the site w3schools: https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_eff_slideup_slidedown

  • hugocsl - whatever, in vdd, you can leave all the items open. What I need is for the person to click on that triangle, do the effect of it by rotating, then the content expands. Then if it is no longer of interest to the user, he can close this tab. But he can leave all the open items, this is indifferent.

  • Put the code because it will depend on the HTML structure to define selectors etc.

  • Cara vc is using some Materialize or Bootstrap framework?

  • I’m not using Framework, I use Visual Studio as editor

Show 3 more comments

3 answers

3

Here’s an option made only with CSS. This answer only contains some elements and styles that can help you. You need to see how best to adapt your content within the collapses so that they do not exceed the limits of container

I used a CSS rule that uses a chackbox hidden that when it is marked by clicking the arrow it is actually a label you change the height of div. The effect of it increasing and gathering and done with the transition

As I said it’s just an example that sometimes you can take advantage of 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>

1


I believe this meets 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>
<div class="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>

  • I made an edition to suit exactly your problem, still pretty simple, but the basis is there!

  • Thank you Rocigno, I will test and then return the results here!

  • Rocigno - I tested your code, the stylization was the same, with the text and everything, but just the animation of expanding the menu that comes from javascript didn’t work yet :/ I did something wrong?

  • Inserts this part into your page header: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

  • Cara worked, the menus expand and collect, as I wanted, however, the text does not "disappear" when the menu is collected. It sits on top of the other texts, gets messy.

  • Did you put that part in the style sheet? .expandir{&#xA; height: 500px;&#xA;}&#xA;&#xA;.expandir .conteudo{&#xA; display: block;&#xA;}&#xA;&#xA;.expandir .titulo{&#xA; display: none;&#xA;}&#xA;&#xA;.conteudo{&#xA; display: none;&#xA;} This is the part that makes the texts appear and disappear

  • Dude, what a lack of attention! was just creating a "content" class and wrapping all the Divs text code. There was only one last detail: When you click to expand, the text suddenly appears, and when you click to collect, it suddenly disappears. I wanted something like, the text appears and disappears as the menu expands/gathers.

  • Okay, I made some changes to the answer... I changed the classes .titulo and .conteudo, instead of "erasing" the div I am only removing the opacity and adding the transition effect. I don’t know if this is the best way to do it, but at least it works :D

  • Look, it worked, and thanks for that! I just think it got a little weird... But anyway... : D

Show 4 more comments

0

To those interested I am putting here the CSS code, followed by the HTML referring to this 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>

Browser other questions tagged javascript css menu

You are not signed in. Login or sign up in order to post.