Accordion

Utilize o Accordion para apresentar informações em secções colapsáveis, permitindo que os utilizadores revelem ou escondam conteúdo conforme necessário. Esta abordagem é ideal para economizar espaço na interface e melhorar a legibilidade, especialmente quando se lida com grandes volumes de informação.

Características Principais

Gestão de Espaço

Permite organizar o conteúdo de forma compacta, mostrando apenas o que é relevante num dado momento.

Interatividade

Facilita a navegação, permitindo aos utilizadores expandir ou colapsar secções com um simples clique.

Exemplo de Utilização

FAQs (Perguntas Frequentes)
Descrições detalhadas de produtos
Manuais ou guias de instruções

Incorpore o Accordion sempre que desejar apresentar grandes quantidades de informação de maneira organizada e acessível, melhorando assim a experiência do utilizador.

Exemplo

Clique nos acordeões abaixo para expandir/recolher o conteúdo do acordeão.

Para renderizar um acordeão expandido por padrão:

adicione o atributo aria-expanded="true" no elemento .accordion-header.

Accordion Item #1

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Accordion Item #2

Accordion Item #3

                                        
<div class="gra-accordion alwaysClose">
    <div class="accordion-item">
        <button class="accordion-header" type="button" aria-expanded="true">
            Accordion Item #1
        </button>
        <div class="accordion-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>
    </div>
    <div class="accordion-item">
        <button class="accordion-header" type="button" aria-expanded="false">
            Accordion Item #2 
        </button>
        <div class="accordion-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>
    </div>
    <div class="accordion-item">
        <button class="accordion-header" type="button" aria-expanded="false">
            Accordion Item #3 
        </button>
        <div class="accordion-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>
    </div>
</div>

Sempre aberto

Adicione à classe gra-accordion a classe alwaysOpen para fazer com que os itens acordeão permaneçam abertos quando outro item for aberto.

Accordion Item #1

Accordion Item #2

Accordion Item #3

                                        
<div class="gra-accordion alwaysOpen">
    <div class="accordion-item">
        <button class="accordion-header" type="button" aria-expanded="false">
            Accordion Item #1
        </button>
        <div class="accordion-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>
    </div>
    <div class="accordion-item">
        <button class="accordion-header" type="button" aria-expanded="false">
            Accordion Item #2 
        </button>
        <div class="accordion-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>
    </div>
    <div class="accordion-item">
        <button class="accordion-header" type="button" aria-expanded="false">
            Accordion Item #3 
        </button>
        <div class="accordion-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>
    </div>
</div>

Exemplo com Icon

Adicione antes do título o icon que desejar.

Accordion Item #1

Accordion Item #2

Accordion Item #3

                                        
<div class="gra-accordion alwaysClose">
    <div class="accordion-item">
        <button class="accordion-header" type="button" aria-expanded="false">
            <span><i class="icon-task"></i>Accordion Item #1</span> 
        </button>
        <div class="accordion-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>
    </div>
    <div class="accordion-item">
        <button class="accordion-header" type="button" aria-expanded="false">
            <span><i class="icon-task"></i>Accordion Item #2</span>
        </button>
        <div class="accordion-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>
    </div>
    <div class="accordion-item">
        <button class="accordion-header" type="button" aria-expanded="false">
            <span><i class="icon-task"></i>Accordion Item #3</span>
        </button>
        <div class="accordion-body">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
        </div>
    </div>
</div>