Solucionado (ver solução)
Solucionado
(ver solução)
3
respostas

[Dúvida] Accordions

Ao fazer os accordions dos cards Buffer e delivery, me pareceu que os cards se comportavam diferente.

No card do Café, ao expandir uma categoria a outra se fecha, já nos outros dois cards isso não ocorre, ao expandir uma categoria a outra contínua aberta. Depois de analisar um pouco, percebi que todas as categorias estavam relacionadas, sempre que expandia uma categoria, independe em qual card ela estiver, as outras categorias de outros cards também se expandem ou colapsam. Teria alguma forma de fazer com que cada card tivesse categorias que agirem independente? Mesmo mudando os ''data-bs-target'' delas, me parecem que elas se comportam diferente e que estão ligadas uma a outra.

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

Esse é um exemplo de como as categorias dos cards estão se comportando de formas diferentes, as duas categorias estarem aberta simultaneamente não era para ocorrer, deveria ocorre como no primeiro, onde quando uma categoria é aberta, a outra colapsa.

Abaixo segue o código da area canvas;

3 respostas

Tirei o canvas 1 por questão de limite de caracteres e o mesmo não apresenta problemas.

  <!-- 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 fw-bold" type="button" data-bs-toggle="collapse"
              data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseOne">
              Eventos
            </button>
          </h2>
          <div id="collapseFour" class="accordion-collapse collapse show" 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 class="accordion-item">
            <h2 class="accordion-header">
              <button class="accordion-button collapsed  botao-padrao fw-bold" type="button" data-bs-toggle="collapse"
                data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseTwo">
                Catering
              </button>
            </h2>
            <div id="collapseFive" 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>
  </div>

  <!-- canvas - 3 -->
  <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 fw-bold" type="button" data-bs-toggle="collapse"
              data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseOne">
              Encomendas para eventos
            </button>
          </h2>
          <div id="collapseSix" class="accordion-collapse collapse show" 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 fw-bold" type="button" data-bs-toggle="collapse"
              data-bs-target="#collapseSeven" aria-expanded="false" aria-controls="collapseTwo">
              Entrega por aplicativo
            </button>
          </h2>
          <div id="collapseSeven" 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>
solução!

Todos os acordeões possuem o mesmo id (accordionExample). A solução seria alterar para ids únicos, como accordionBuffet, accordionDelivery, etc.


<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="accordionBuffet"> <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed botao-padrao fw-bold" type="button" data-bs-toggle="collapse"
            data-bs-target="#collapseFour" aria-expanded="false" aria-controls="collapseOne">
            Eventos
          </button>
        </h2>
        <div id="collapseFour" class="accordion-collapse collapse show" data-bs-parent="#accordionBuffet">
          <div class="accordion-body">
            Organizamos buffet com cardápios variados e personalizados para casamentos, festas de aniversário e outros
            eventos!
          </div>
        </div>
        <div class="accordion-item">
          <h2 class="accordion-header">
            <button class="accordion-button collapsed  botao-padrao fw-bold" type="button" data-bs-toggle="collapse"
              data-bs-target="#collapseFive" aria-expanded="false" aria-controls="collapseTwo">
              Catering
            </button>
          </h2>
          <div id="collapseFive" class="accordion-collapse collapse" data-bs-parent="#accordionBuffet">
            <div class="accordion-body">
              Oferecemos serviço de alimentação variada para coffee breaks, produções e bastidores.
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<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="accordionDelivery"> <div class="accordion-item">
        <h2 class="accordion-header">
          <button class="accordion-button collapsed botao-padrao fw-bold" type="button" data-bs-toggle="collapse"
            data-bs-target="#collapseSix" aria-expanded="false" aria-controls="collapseOne">
            Encomendas para eventos
          </button>
        </h2>

Era isso mesmo, obrigado