Implementação de Abas Expansíveis

CSSEstilojQueryJSScript
O código fornecido implementa um conjunto de abas expansíveis utilizando jQuery. Quando o título de uma aba é clicado, o conteúdo abaixo dele é mostrado ou escondido, e o ícone no título da aba alterna entre um sinal de mais e um sinal de menos.

Como instalar

  1. Certifique-se de que a biblioteca jQuery e a biblioteca Font Awesome estão incluídas no seu projeto.
  2. Copie e cole o código fornecido em um arquivo JavaScript ou entre as tags <script> e </script> no seu documento HTML.
  3. Copie e cole o código CSS fornecido entre as tags <style> e </style> no cabeçalho do seu documento HTML ou em um arquivo CSS externo.
  4. Estruture seu HTML com elementos que tenham as classes aba-titulo e aba-conteudo conforme desejado.

Explicando o código

  • No bloco de código JavaScript:
    1. jQuery(".aba-conteudo").hide(); esconde inicialmente todos os elementos com a classe aba-conteudo.
    2. jQuery(".aba-titulo").click(function () {...}); define um manipulador de evento de clique para todos os elementos com a classe aba-titulo.
    3. jQuery(this).next().slideToggle("fast"); alterna a visibilidade do elemento imediatamente após o título da aba clicada, deslizando para cima ou para baixo.
    4. jQuery(this).find("i").toggleClass("fa-plus-circle fa-minus-circle"); alterna as classes do ícone Font Awesome entre fa-plus-circle e fa-minus-circle, alterando o ícone de um sinal de mais para um sinal de menos ou vice-versa.
  • No bloco de código CSS:
    1. .aba-conteudo { display: none; } define que todos os elementos com a classe aba-conteudo serão inicialmente escondidos.

Códigos

CSS

				
					
    .aba-conteudo {
        display: none;
    }

				
			

JS

				
					
				
			
				
					
    jQuery(document).ready(function () {
        jQuery(".aba-conteudo").hide();
        jQuery(".aba-titulo").click(function () {
            jQuery(this).next().slideToggle("fast");
            jQuery(this).find("i").toggleClass("fa-plus-circle fa-minus-circle");
        });
    });

				
			

Relacionados

Efeito de Brilho em Botão do Elementor

Este código CSS aplica um efeito de brilho...
CSSEstilo

teste

teste
Script

Desabilitar Ferramentas de Desenvolvedor no Navegador

Este código JavaScript desabilita automaticamente as ferramentas de...
JSScript

Fale com a Lab1