Você está usando um navegador desatualizado. Para a visualização correta, atualize seu navegador:

Mapa do site


SimpleUi

Atualizando

Código para Sanfona gêmeas Download

? - +
Conteúdo safonado estilo slide-show e slide-hide
  1. Pré-requisito
  2. Coloque a class data-twin="true" em cada uma dessas sanfonas
Pronto! Isso é suficiente. Caso queira, você pode customizar a função:
  1. É possível agrupar sanfonas gêmeas para que um grupo não interfira no outro
    • Para isso, insira o atributo data-group nas sanfonas que farão parte do grupo
    • Informe um rótulo qualquer que identifique o nome desse grupo, exemplo data-group="meu grupo"
  1. Após a animação da sanfona, usuários avançados podem implementar uma função do tipo callback para cada sanfona. Consulte a função sanfona para saber mais.
  2. Para sanfonas gêmeas, não use o data-clickoutside
    • A princípio, o efeito parece similar, no entanto, os data-clickoutside são recolhidos quando se clica em qualquer elemento da página. Já as sanfonas gêmeas devem recolher somente ao clicar no(s) elemento(s) irmão(s)
Customizar


Número de elementos

Visualizar sanfona(s).

Comportamento

Escolha as sanfonas gêmeas Padrão: sem relacionamento (false) :

, agrupado pelo identificador
, agrupado pelo identificador
, agrupado pelo identificador
, agrupado pelo identificador
, agrupado pelo identificador
, agrupado pelo identificador
, agrupado pelo identificador
, agrupado pelo identificador
, agrupado pelo identificador
Saiba mais
Uma sanfona gêmea não pode ter sua área de retração ampliada (veja o exemplo simples das sanfonas). A princípio, o efeito parece similar, no entanto, a área de retração ampliada recolhe as sanfonas a partir do clique em qualquer parte da tela. Já uma sanfona gêmea deve recolher somente ao clicar em outra sanfona irmã.
Tem certeza que deseja reiniciar todos os valores?

Resultado para Sanfona gêmeas