-1

Olá!

Estou usando Html, Css e Javascript para criar um grupo de três cards iguais, cada um com um botão ler mais/ ler menos. Cada card é um Plano com pacotes de benefícios e eu quero que esses benefícios expandam e encolham ao clicar no botão.

O problema é que esse botão só funciona no Card 1. Ao clicar no mesmo botão no Card 2 e Card 3, nada acontece.

Tentei copiar o código JavaScript três vezes, dar diferentes ids para cada Card no Html e então copiar esses ids para o getElementById no JS, mas não obtive nenhum resultado diferente (meu conhecimento em JS é quase zero).

Me ajudem a ver onde estou errando, por favor? Coloquei o codigo no executavel. E muito obrigada.

var button = document.getElementById('lermais');
  
button.addEventListener('click', function(){
  var plano = document.querySelector('.plano');
  plano.classList.toggle('active');

  if (plano.classList.contains('active')) {
    return button.textContent = 'Ver menos';
  }

  button.textContent = 'Ver todos os benefícios';
});
body {
      diplay: flex;
      background-color: #333;
      color: #fff;
    }

    .sectionplanos{
      display: flex;
      justify-content: center;
      flex-wrap: wrap;
      width: 100%;
      transition: .5s !important;
      font: inherit;
      font-family: Montserrat;

    }

    .sectionplanos .plano{
      position: relative;
      display: block;
      color: #fff;
      width: 220px;
      background-color: #1e1e1e;
      border-top: 4px solid #fff;
      border-radius: 0 15px 10px 10px;
      margin-left: 30px;
      margin-bottom: 50px;
    }


    .conteudoplanos{
      position: relative;
      overflow: hidden;
      height: 250px;
      color: #fff;
      padding: 20px;
      text-align: left;
      font-size: 14px;
      font-style: normal;
      font-weight: 400;
      line-height: 12px;
    }


    .conteudoplanos::before{
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      right: 0;
      width: 260px;
      height: 100px;
      background: linear-gradient(transparent, #1e1e1e);
    }

    #lermais{
      border: none;
      color: #FFF;
      background-color: transparent;
      font-weight: bold;
      cursor: pointer;
      transition: 0.3s;
    }

    #lermais:hover{
      font-size: 17px;
      transition: 0.3s;
    }

    .plano.active .conteudoplanos{
      height: auto;
    }

    .plano.active .conteudoplanos::before{
      visibility: hidden;
    }



    .headplanos {
      color: #FFF;
      text-align: center;
      height: 124px;
    }

    .nomeplanos {
      font-family: Montserrat;
      font-size: 30px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      margin-top: 15px;
    }

    .precoplanos {
      font-family: Montserrat;
      font-size: 16px;
      font-style: normal;
      font-weight: 600;
      line-height: normal;
      margin: 0px !important;
    }

    .tipoplanos {
      text-align: center;
      font-family: Montserrat;
      font-size: 13px;
      font-style: normal;
      font-weight: 300;
      line-height: normal;
      margin: 0px !important;
    }

    .beneficiosplanos {
      font-family: Montserrat;
      font-size: 13px;
      font-style: normal;
      font-weight: 400;
      line-height: 25px;
      padding: 10px;
    }

    .rodapeplanos {
      padding: 10px;
      height: 50px;
      align-items: center;
      justify-content: center;
      text-align: center;
    }
    <div class="sectionplanos">
       <div class="plano">                
          <div class="headplanos">
            <h3 class="nomeplanos">Plano 1</h3>
            <p class="precoplanos">preço</p>
            <p class="tipoplanos">tipo</p>
          </div>
          <div class="conteudoplanos">
            <p>Beneficio.</p>
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>       
          </div>
          <div class="rodapeplanos">                      
            <button type="button" id="lermais">Ver todos os beneficios</button>
          </div>                                   
        </div>
        <div class="plano">                
          <div class="headplanos">
            <h3 class="nomeplanos">Plano 2</h3>
            <p class="precoplanos">preço</p>
            <p class="tipoplanos">tipo</p>
          </div>
          <div class="conteudoplanos">
            <p>Beneficio.</p>
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>       
          </div>
          <div class="rodapeplanos">                      
            <button type="button" id="lermais">Ver todos os beneficios</button>
          </div>                                   
        </div>
        <div class="plano">                
          <div class="headplanos">
            <h3 class="nomeplanos">Plano 2</h3>
            <p class="precoplanos">preço</p>
            <p class="tipoplanos">tipo</p>
          </div>
          <div class="conteudoplanos">
            <p>Beneficio.</p>
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>    
            <p>Beneficio.</p>       
          </div>
          <div class="rodapeplanos">                      
            <button type="button" id="lermais">Ver todos os beneficios</button>
          </div>                                   
        </div>
    </div>

4
  • "O problema é que esse botão só funciona no Card 1" isso é claro, e o erro está aqui: document.getElementById('lermais') o ID dever ser único, e no seu caso está usando o mesmo ID para dois elementos, só vai funcionar com o primeiro encontrado pois não é suposto haver outro. Tente atribuir uma classe aos botões, por exemplo "ler-mais" e mudar o seletor para document.querySelectorAll('.ler-mais').forEach(botao => botao.addEventListener('click', ... assim vai atribuir um evento para cada botão 21/11 às 12:47
  • para além disso, como são botões diferentes, é interessante passar uma referência do botão para a função do evento, para poder saber de qual botão se trata, mas inicialmente tente aplicar a sugestão acima para ter cada botão com um evento separado, e aproveite e remova o ID, ou atribua um diferente para cada botão se realmente precisar 21/11 às 12:49
  • Então, como eu disse na pergunta, eu testei com ids únicos para cada card e nada mudou. Sobre a sua solução, seria algo tipo isso? `var button = document.querySelectorAll('.lermais').forEach(button => button.addEventListener('click', function(){ var plano = document.querySelector('.plano'); plano.classList.toggle('active'); if (plano.classList.contains('active')) { return button.textContent = 'Ver menos'; } button.textContent = 'Ver todos os benefícios'; } ) ); 21/11 às 13:00
  • sim é isso, mas isso vai resolver o click em todos os botões, mas precisa saber qual elemento com a classe "plano" deve usar. Para isso precisa passar o botão como referência no evento 21/11 às 14:03

0

Você deve fazer log-in para responder a esta pergunta.

Pesquise outras perguntas com a tag .