Construindo Interfaces de Acordeão Responsivas

Introdução

Neste projeto, você aprenderá como criar um acordeão dobrável simples usando HTML, CSS e JavaScript. O acordeão dobrável é um elemento de interface de usuário (UI) comum que permite aos usuários expandir e recolher seções de conteúdo, tornando-o um recurso útil para exibir informações de forma compacta e organizada.

👀 Pré-visualização

🎯 Tarefas

Neste projeto, você aprenderá:

• Como configurar a estrutura HTML para o acordeão dobrável
• Como estilizar o acordeão usando CSS
• Como adicionar interatividade ao acordeão usando JavaScript

🏆 Conquistas

Após concluir este projeto, você será capaz de:

• Criar uma interface de acordeão responsiva e visualmente atraente
• Usar JavaScript para adicionar interatividade e comportamento dinâmico a elementos web
• Integrar HTML, CSS e JavaScript para construir um componente web funcional e amigável

Configurar a Estrutura do Projeto

Nesta etapa, você configurará o projeto abrindo os arquivos fornecidos no editor.

1. Abra o editor e você deverá ver os seguintes arquivos: index.html, style.css, index.js e jquery-3.6.0.min.js.
2. Clique no botão Go Live no canto inferior direito do WebIDE para executar o projeto.
3. Abra "Web 8080" no topo da VM e atualize-o manualmente para ver a página. Clicar em uma imagem em uma página que está recolhida não a expande. Você pode vê-lo da seguinte forma:

Adicionar Interatividade com jQuery

Nesta etapa, você adicionará interatividade ao acordeão usando jQuery.

1. Abra o arquivo index.js no seu editor.
2. Adicione o seguinte código:

$(".option").click(function () {
  $(".option").removeClass("active");
  $(this).addClass("active");
});

Este código adiciona um ouvinte de evento de clique a cada elemento .option. Quando um .option é clicado, o código remove a classe active de todos os elementos .option e adiciona a classe active ao elemento .option clicado. Isso irá recolher ou expandir o acordeão conforme necessário.

3. Salve o arquivo index.js.
4. Atualize o navegador para ver o resultado final.
5. Clique nas diferentes opções do acordeão para vê-las expandir e recolher.

O efeito se parece com isto:

Parabéns! Você concluiu o projeto do acordeão dobrável.

Resumo

Parabéns! Você concluiu este projeto. Você pode praticar mais laboratórios no LabEx para aprimorar suas habilidades.