Como trabalhar com acordeão em CSS3

Você usar o acordeão no CSS3 para ocultar qualquer elemento de página de vista. Quando um usuário seleciona uma categoria, os elementos em que categoria se tornam visíveis, e os elementos de todas as outras categorias estão ocultas. O efeito é concentrar a atenção do usuário e tornar o usuário mais eficiente na execução de tarefas específicas. O código a seguir é tudo que você precisa para fazer esse recurso utilizável.

$ (Function () {$ ("#Configuração").acordeão()-})-

O código é conciso, mas o segredo neste caso é a maneira de criar as etiquetas para sua página. Observe que o widget Acordeão esconde de vista as configurações que o usuário não está focando. Quando o usuário clica cor de fundo, as opções Cor do primeiro plano são escondidos da visão. Da mesma forma, clicando em Opções revela os controles Opções.

Os controles em cada área não importam para o widget Acordeão, mas a formatação HTML5 faz. Este formulário também inclui um botão de envio. Se você não configurar os controles corretamente, o botão enviar torna-se parte do efeito sanfona, e clicando já não envia o formulário. Aqui está uma visão condensada do HTML5 para este exemplo:

Observe que você deve colocar os títulos de grupos de controle dentro de um separado

e, em seguida, rotular que

como aquele que deseja utilizar para o efeito sanfona. Uma separação

abriga os controles individuais para um grupo específico. O botão enviar é parte do formulário, mas é fora da Configuração

Quando você clica no botão Configuration Change, você vê que a forma funciona como deveria - analisando o conteúdo do campo de endereço. Usando os padrões, a URL resultante contém Accordion.html? Foreground = Vermelho&Background = Red quando você clica Configuration Change.