Algumas das mais poderosas ferramentas jQuery são realmente o mais fácil de usar em HTML5 e CSS3 programação. O Widget de acordeão tornou-se uma parte extremamente popular do conjunto de ferramentas jQuery UI.

Aqui, você vê títulos de livros. Os detalhes para o primeiro estão disponíveis, mas os detalhes dos outros livros estão ocultas.

Este efeito maravilhoso permite que o usuário se concentrar em uma determinada parte de um contexto mais amplo ao ver o contorno geral. Chama-se acordeão porque as várias partes se expandem e contraem para permitir que o usuário se concentrar em uma parte sem perder lugar da sua posição. conteúdo dobrável tornou-se uma ferramenta importante de usabilidade que se tornou popular pela barra do sistema no Mac OS e outras ferramentas de usabilidade populares.

O efeito sanfona é surpreendentemente fácil de conseguir com jQuery:

 
acordeão Demonstração
Livro I - Criação da Fundação HTML
Fundações HTML som
É toda sobre Validação
Escolhendo suas Ferramentas
Gestão da Informação com listas e tabelas
Fazendo conexões com links
adicionando imagens
Criação de formulários
Livro II - Styling com CSS
Colorir o mundo
styling Texto
Seletores, classe e estilo
Borders and Backgrounds
Níveis de CSS
Livro III - Usando CSS posicional para layout
Diversão com o Float Fabulous
Construção Floating Layouts de página
As listas de estilo e menus
Usando Posicionamento alternativa

Como você pode ver pelo olhar sobre o código, é principalmente apenas HTML. O efeito é muito fácil de realizar:

1. Importar todos os suspeitos do costume.

   Você precisa importar o jQuery e arquivos javascript jQuery UI, e um arquivo de tema CSS. Você também precisa ter certeza de que o CSS tem acesso à imagens directório com ícones e fundos porque ele vai usar algumas dessas imagens automaticamente.

2. Construa sua página HTML como normal.

   Criar uma página HTML como você faria normalmente. Preste atenção às seções que você deseja entrar em colapso. Não devem, normalmente, ser uma etiqueta de posição para cada elemento, todos ao mesmo nível.

3. Criar uma div que contém todo o conteúdo desmontável.

   Colocar todo o conteúdo dobrável em uma única div com um ID. Você vai estar virando esta div em um elemento jQuery acordeão.

4. Adicionar uma âncora em torno de cada título que você deseja especificar como desmontável.

   Coloque uma marca de âncora vazia () ao redor de cada título que você deseja usar como cabeçalho desmontável. O sinal indica que a âncora irá chamar a mesma página e é usado como um espaço reservado pelo mecanismo jQuery UI. Você pode adicionar a âncora diretamente no HTML ou através de código jQuery.

5. Criar um jQuery nisso()função.

   Use as técnicas normais para construir um inicializador jQuery.

6. Aplique o acordeão() método para o div.

   Use jQuery para identificar a div que contém o conteúdo dobrável e aplicar acordeão() a ele:

    função init () {$ ( "# acordeão") acordeão () -.}