Como trabalhar com o acordeão no CSS3

Você usar o acordeão no CSS3 para esconder qualquer elemento da 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 realização de tarefas específicas. O código a seguir é tudo que você precisa para tornar este 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 oculta da 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 de 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 separada

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 = RedBackground = Red quando você clica Configuration Change.