[Dúvida] Possível erro no código

Olá, Ewersson! Como vai?

Primeiro, gostaria de confirmar se você está utilizando a versão correta do Bootstrap. Para o offcanvas funcionar corretamente, você deve estar usando o Bootstrap 5 ou superior.

Agora, sobre o seu código, parece que você está seguindo a estrutura correta para o offcanvas. No entanto, percebi que você não compartilhou o código do offcanvas do terceiro card.

Aqui vai um exemplo de como ele poderia ser:

<div class="offcanvas offcanvas-end" tabindex="-1" id="canvas-3" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header">
        <h5 class="offcanvas-title" id="offcanvasRightLabel">Delivery</h5>
        <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
        <div class="accordion" id="accordionExample">
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed botao-padrao" type="button" data-bs-toggle="collapse"
                        data-bs-target="#accordionEncomendas" aria-expanded="false" aria-controls="collapseOne">
                        Encomendas para eventos
                    </button>
                </h2>
                <div id="accordionEncomendas" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        Produzimos e entregamos os itens de café de nosso cardápio em grandes quantidades para seus eventos! Basta entrar em contato e fazer a reserva com 72h de antecedência.
                    </div>
                </div>
            </div>
            <div class="accordion-item">
                <h2 class="accordion-header">
                    <button class="accordion-button collapsed botao-padrao" type="button" data-bs-toggle="collapse"
                        data-bs-target="#accordionEntrega" aria-expanded="false" aria-controls="collapseOne">
                        Entrega por aplicativo
                    </button>
                </h2>
                <div id="accordionEntrega" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
                    <div class="accordion-body">
                        Entregamos pelos aplicativos Ifood e Rappi. Consulte nosso cardápio por lá e faça seu pedido!
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Caso isso não resolva, por favor, verifique se você está incluindo corretamente os scripts do Bootstrap no final do seu arquivo HTML. Eles são necessários para o funcionamento do offcanvas.

Espero ter ajudado e bons estudos!

Olá Sarah, tudo bem? Espero que sim.

Estou usando a versão mais recente do Bootstrap, o Script também está certo. O card 3 eu deixei só como exemplo, ainda não apliquei no 3 card o offcanvas.

Só apliquei no segundo e mesmo assim ele não funciona.

Olá, Ewerson! Como vai? Espero que bem! :)

Conferi os códigos, e muito legal que você tentou fazer sem olhar o gabarito de resposta!

O primeiro offcanvas do desafio (que é o segundo do projeto) tá funcionando normalmente, o de Buffet.

E o de Delivery que precisa ser reajustado.

Para aplicar a funcionalidade, é necessário que o atributo data-bs-target no título tenha o mesmo valor que o id do seu texto descritivo. A mesma coisa com os botões "Quero detalhes" e os grupos de offcanvas:

 data-bs-target="#accordionCatering"

id="accordionCatering" 

 data-bs-target="#canvas-1"

id="canvas-1" 

Você conferir com todo o código pronto o terceiro offcanvas, que ficou faltando aplicar aqui:

  <!-- Canvas 2 -->

  <div class="offcanvas offcanvas-end" tabindex="-1" id="canvas-2" aria-labelledby="offcanvasRightLabel">
    <div class="offcanvas-header">
      <h5 class="offcanvas-title" id="offcanvasRightLabel">Buffet</h5>
      <button type="button" class="btn-close" data-bs-dismiss="offcanvas" aria-label="Close"></button>
    </div>
    <div class="offcanvas-body">
      <div class="accordion" id="accordionExample">
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed botao-padrao" type="button" data-bs-toggle="collapse"
              data-bs-target="#accordionEventos" aria-expanded="false" aria-controls="collapseOne">
              Eventos
            </button>
          </h2>
          <div id="accordionEventos" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              Organizamos buffet com cardápios variados e personalizados para casamentos, festas de
              aniversário e outros eventos!
            </div>
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed botao-padrao" type="button" data-bs-toggle="collapse"
              data-bs-target="#accordionCatering" aria-expanded="false" aria-controls="collapseOne">
              Catering
            </button>
          </h2>
          <div id="accordionCatering" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
            <div class="accordion-body">
              Oferecemos serviço de alimentação variada para coffee breaks, produções e bastidores.
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>

Espero ter ajudado! Bons estudos!

Surgindo mais dúvidas, é só falar!

Olá Luan, tudo bem? Espero que sim. Fiz como você mostrou, mas o mesmo não está funcionando o que pode está acontecendo?

Testei em outro navegador e testei no meu celular, o erro continua.

Olá, Ewersson. Passando só pra pontuar que vc me informou no Discord que conseguiu solucionar o problema!

Se desejar, pode compartilhar a solução aqui com outros colegas! Bons estudos! Surgindo mais dúvidas, pode contar com a gente! :)

Olá Luan, tudo bem? Espero que sim.

Então, consegui resolver meus erros fazendo os seguintes passos:

1. Verifiquei linha por linha do meu código, comparando o código do final da aula
2. Li o erro do meu código e depois consertei fazendo a alteração no que estava errado.
3. Por fim, testei e tive outros erros diferentes, mas eu fui mudando e vendo onde eu queria chegar.

Foi assim que resolvi meus erros e bugs do código.

Obrigado Luan e Sarah, pelos suportes prestados. :)